<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>[翻译] Grid 布局完全指南 | AJ</title>
    <meta name="generator" content="VuePress 1.5.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <script>
            var _hmt = _hmt || [];
            (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?51b8c2e72d1adf96524638ce85bb7d72";
            var s = document.getElementsByTagName("script")[0]; 
            s.parentNode.insertBefore(hm, s);

            // 引入谷歌,不需要可删除这段
            var hm1 = document.createElement("script");
            hm1.src = "https://www.googletagmanager.com/gtag/js?id=G-B7351EYS04";
            var s1 = document.getElementsByTagName("script")[0]; 
            s1.parentNode.insertBefore(hm1, s1);
            })();

            // 谷歌加载,不需要可删除
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'G-B7351EYS04');
        </script>
    <meta name="description" content="JSON Web Token 是 [rfc7519](https://tools.ietf.org/html/rfc7519) 出的一份标准，使用 JSON 来传递数据，用于判定用户是否登录状态。jwt 之前，使用 session 来做用户认证。">
    <link rel="preload" href="/assets/css/0.styles.a3df589e.css" as="style"><link rel="preload" href="/assets/js/app.cb35c8f6.js" as="script"><link rel="preload" href="/assets/js/2.063846a6.js" as="script"><link rel="preload" href="/assets/js/4.1ffb4609.js" as="script"><link rel="preload" href="/assets/js/677.41a8087a.js" as="script"><link rel="prefetch" href="/assets/js/10.5629fe4d.js"><link rel="prefetch" href="/assets/js/100.8417ccea.js"><link rel="prefetch" href="/assets/js/101.37fdb377.js"><link rel="prefetch" href="/assets/js/102.848b686d.js"><link rel="prefetch" href="/assets/js/103.6a2489a0.js"><link rel="prefetch" href="/assets/js/104.99e8899f.js"><link rel="prefetch" href="/assets/js/105.8b741763.js"><link rel="prefetch" href="/assets/js/106.08163715.js"><link rel="prefetch" href="/assets/js/107.21801349.js"><link rel="prefetch" href="/assets/js/108.e3a2892b.js"><link rel="prefetch" href="/assets/js/109.dab5618c.js"><link rel="prefetch" href="/assets/js/11.cddc1623.js"><link rel="prefetch" href="/assets/js/110.f5249b39.js"><link rel="prefetch" href="/assets/js/111.9abf8bce.js"><link rel="prefetch" href="/assets/js/112.8eb86924.js"><link rel="prefetch" href="/assets/js/113.c180ed46.js"><link rel="prefetch" href="/assets/js/114.2370f5b5.js"><link rel="prefetch" href="/assets/js/115.88dc3fd8.js"><link rel="prefetch" href="/assets/js/116.63403600.js"><link rel="prefetch" href="/assets/js/117.83674aa0.js"><link rel="prefetch" href="/assets/js/118.9c58c685.js"><link rel="prefetch" href="/assets/js/119.621f9a70.js"><link rel="prefetch" href="/assets/js/12.ff3d03f5.js"><link rel="prefetch" href="/assets/js/120.a6d2b7f7.js"><link rel="prefetch" href="/assets/js/121.ae0ce9d1.js"><link rel="prefetch" href="/assets/js/122.de240e6d.js"><link rel="prefetch" href="/assets/js/123.b043e3e4.js"><link rel="prefetch" href="/assets/js/124.550af937.js"><link rel="prefetch" href="/assets/js/125.6f06b34c.js"><link rel="prefetch" href="/assets/js/126.38d64604.js"><link rel="prefetch" href="/assets/js/127.a948db56.js"><link rel="prefetch" href="/assets/js/128.4ca789e0.js"><link rel="prefetch" href="/assets/js/129.59be4505.js"><link rel="prefetch" href="/assets/js/13.e9f75cc3.js"><link rel="prefetch" href="/assets/js/130.ddae76a9.js"><link rel="prefetch" href="/assets/js/131.d969c265.js"><link rel="prefetch" href="/assets/js/132.5f43ce5c.js"><link rel="prefetch" href="/assets/js/133.b651af22.js"><link rel="prefetch" href="/assets/js/134.2499236a.js"><link rel="prefetch" href="/assets/js/135.4180596c.js"><link rel="prefetch" href="/assets/js/136.2c309233.js"><link rel="prefetch" href="/assets/js/137.72ca42dd.js"><link rel="prefetch" href="/assets/js/138.3772cd38.js"><link rel="prefetch" href="/assets/js/139.1d0a53da.js"><link rel="prefetch" href="/assets/js/14.be4b89ed.js"><link rel="prefetch" href="/assets/js/140.22368353.js"><link rel="prefetch" href="/assets/js/141.a14aef3c.js"><link rel="prefetch" href="/assets/js/142.2041ce3a.js"><link rel="prefetch" href="/assets/js/143.377262ec.js"><link rel="prefetch" href="/assets/js/144.8fcbc368.js"><link rel="prefetch" href="/assets/js/145.46da36bf.js"><link rel="prefetch" href="/assets/js/146.eceae0d9.js"><link rel="prefetch" href="/assets/js/147.e1bd6531.js"><link rel="prefetch" href="/assets/js/148.76f193ce.js"><link rel="prefetch" href="/assets/js/149.587bd581.js"><link rel="prefetch" href="/assets/js/15.e3219ac0.js"><link rel="prefetch" href="/assets/js/150.169c71e0.js"><link rel="prefetch" href="/assets/js/151.384021ea.js"><link rel="prefetch" href="/assets/js/152.0f20cf03.js"><link rel="prefetch" href="/assets/js/153.fd94af1e.js"><link rel="prefetch" href="/assets/js/154.a550f5dc.js"><link rel="prefetch" href="/assets/js/155.ba1ae86e.js"><link rel="prefetch" href="/assets/js/156.3b98ded0.js"><link rel="prefetch" href="/assets/js/157.cd378596.js"><link rel="prefetch" href="/assets/js/158.c138d0df.js"><link rel="prefetch" href="/assets/js/159.2635f7f4.js"><link rel="prefetch" href="/assets/js/16.c9c35d42.js"><link rel="prefetch" href="/assets/js/160.d51b4126.js"><link rel="prefetch" href="/assets/js/161.5dc29e7b.js"><link rel="prefetch" href="/assets/js/162.f257a92b.js"><link rel="prefetch" href="/assets/js/163.9eb75e40.js"><link rel="prefetch" href="/assets/js/164.8fb1e22b.js"><link rel="prefetch" href="/assets/js/165.49255503.js"><link rel="prefetch" href="/assets/js/166.e54539e6.js"><link rel="prefetch" href="/assets/js/167.a06acdb0.js"><link rel="prefetch" href="/assets/js/168.948ab620.js"><link rel="prefetch" href="/assets/js/169.7d756812.js"><link rel="prefetch" href="/assets/js/17.81067bc8.js"><link rel="prefetch" href="/assets/js/170.ffe63330.js"><link rel="prefetch" href="/assets/js/171.835398b9.js"><link rel="prefetch" href="/assets/js/172.3987be39.js"><link rel="prefetch" href="/assets/js/173.e3cedb8a.js"><link rel="prefetch" href="/assets/js/174.11a32588.js"><link rel="prefetch" href="/assets/js/175.da6f9782.js"><link rel="prefetch" href="/assets/js/176.50e55edc.js"><link rel="prefetch" href="/assets/js/177.a89a1d17.js"><link rel="prefetch" href="/assets/js/178.7ad3ce84.js"><link rel="prefetch" href="/assets/js/179.98a1343b.js"><link rel="prefetch" href="/assets/js/18.b67caf4c.js"><link rel="prefetch" href="/assets/js/180.4e98599b.js"><link rel="prefetch" href="/assets/js/181.dd885afd.js"><link rel="prefetch" href="/assets/js/182.789990c8.js"><link rel="prefetch" href="/assets/js/183.f11ca2fd.js"><link rel="prefetch" href="/assets/js/184.fcf128ec.js"><link rel="prefetch" href="/assets/js/185.54e1e9b6.js"><link rel="prefetch" href="/assets/js/186.db91021a.js"><link rel="prefetch" href="/assets/js/187.5309dd42.js"><link rel="prefetch" href="/assets/js/188.615821ea.js"><link rel="prefetch" href="/assets/js/189.f23f1d42.js"><link rel="prefetch" href="/assets/js/19.294a011c.js"><link rel="prefetch" href="/assets/js/190.efe894bc.js"><link rel="prefetch" href="/assets/js/191.0d14904a.js"><link rel="prefetch" href="/assets/js/192.efd25a9e.js"><link rel="prefetch" href="/assets/js/193.88151f34.js"><link rel="prefetch" href="/assets/js/194.efedce14.js"><link rel="prefetch" href="/assets/js/195.03ac15bb.js"><link rel="prefetch" href="/assets/js/196.fbc18389.js"><link rel="prefetch" href="/assets/js/197.0257ab5e.js"><link rel="prefetch" href="/assets/js/198.f1de2817.js"><link rel="prefetch" href="/assets/js/199.8f1c166b.js"><link rel="prefetch" href="/assets/js/20.1a41edb1.js"><link rel="prefetch" href="/assets/js/200.4af99727.js"><link rel="prefetch" href="/assets/js/201.9f8caef1.js"><link rel="prefetch" href="/assets/js/202.6f07d705.js"><link rel="prefetch" href="/assets/js/203.5012fe50.js"><link rel="prefetch" href="/assets/js/204.3a0dfd8e.js"><link rel="prefetch" href="/assets/js/205.0ba9b606.js"><link rel="prefetch" href="/assets/js/206.663a49ec.js"><link rel="prefetch" href="/assets/js/207.b2406149.js"><link rel="prefetch" href="/assets/js/208.b0b2dfd8.js"><link rel="prefetch" href="/assets/js/209.41a0ec9f.js"><link rel="prefetch" href="/assets/js/21.b6ea6f9a.js"><link rel="prefetch" href="/assets/js/210.6f36beb8.js"><link rel="prefetch" href="/assets/js/211.90ef6e5c.js"><link rel="prefetch" href="/assets/js/212.42339063.js"><link rel="prefetch" href="/assets/js/213.a2bfeda9.js"><link rel="prefetch" href="/assets/js/214.5c7eb42a.js"><link rel="prefetch" href="/assets/js/215.18260ae5.js"><link rel="prefetch" href="/assets/js/216.7678fd29.js"><link rel="prefetch" href="/assets/js/217.9d936f88.js"><link rel="prefetch" href="/assets/js/218.bac403c4.js"><link rel="prefetch" href="/assets/js/219.9d8cb16b.js"><link rel="prefetch" href="/assets/js/22.367cc253.js"><link rel="prefetch" href="/assets/js/220.375b7707.js"><link rel="prefetch" href="/assets/js/221.3e400da4.js"><link rel="prefetch" href="/assets/js/222.8fbd2857.js"><link rel="prefetch" href="/assets/js/223.76a10075.js"><link rel="prefetch" href="/assets/js/224.ff94cc4e.js"><link rel="prefetch" href="/assets/js/225.d4688ca6.js"><link rel="prefetch" href="/assets/js/226.b13b18af.js"><link rel="prefetch" href="/assets/js/227.288d0f96.js"><link rel="prefetch" href="/assets/js/228.60430ac0.js"><link rel="prefetch" href="/assets/js/229.da728342.js"><link rel="prefetch" href="/assets/js/23.bc3de730.js"><link rel="prefetch" href="/assets/js/230.d8417d20.js"><link rel="prefetch" href="/assets/js/231.6a9ce0b4.js"><link rel="prefetch" href="/assets/js/232.7611b413.js"><link rel="prefetch" href="/assets/js/233.94712cf9.js"><link rel="prefetch" href="/assets/js/234.93888298.js"><link rel="prefetch" href="/assets/js/235.62506981.js"><link rel="prefetch" href="/assets/js/236.5a055c7c.js"><link rel="prefetch" href="/assets/js/237.0a6c4902.js"><link rel="prefetch" href="/assets/js/238.e5f37663.js"><link rel="prefetch" href="/assets/js/239.331bba86.js"><link rel="prefetch" href="/assets/js/24.82f0901c.js"><link rel="prefetch" href="/assets/js/240.59591cfc.js"><link rel="prefetch" href="/assets/js/241.ce671f47.js"><link rel="prefetch" href="/assets/js/242.fb2542fa.js"><link rel="prefetch" href="/assets/js/243.74abc73d.js"><link rel="prefetch" href="/assets/js/244.ecd707b2.js"><link rel="prefetch" href="/assets/js/245.d728367b.js"><link rel="prefetch" href="/assets/js/246.9270e7fe.js"><link rel="prefetch" href="/assets/js/247.a421ba15.js"><link rel="prefetch" href="/assets/js/248.e759132e.js"><link rel="prefetch" href="/assets/js/249.3077fb46.js"><link rel="prefetch" href="/assets/js/25.95c551dc.js"><link rel="prefetch" href="/assets/js/250.5fe4dd03.js"><link rel="prefetch" href="/assets/js/251.4b8fe76c.js"><link rel="prefetch" href="/assets/js/252.0d1cf7ea.js"><link rel="prefetch" href="/assets/js/253.89d16ba0.js"><link rel="prefetch" href="/assets/js/254.8d1afc68.js"><link rel="prefetch" href="/assets/js/255.64e680cb.js"><link rel="prefetch" href="/assets/js/256.9defbd0e.js"><link rel="prefetch" href="/assets/js/257.1fef24fd.js"><link rel="prefetch" href="/assets/js/258.4e205286.js"><link rel="prefetch" href="/assets/js/259.f3d56efc.js"><link rel="prefetch" href="/assets/js/26.7fe56bac.js"><link rel="prefetch" href="/assets/js/260.378299e6.js"><link rel="prefetch" href="/assets/js/261.8e4fb397.js"><link rel="prefetch" href="/assets/js/262.54595d98.js"><link rel="prefetch" href="/assets/js/263.fb333dc1.js"><link rel="prefetch" href="/assets/js/264.13d13301.js"><link rel="prefetch" href="/assets/js/265.c85104bc.js"><link rel="prefetch" href="/assets/js/266.9f3d1f1c.js"><link rel="prefetch" href="/assets/js/267.fb392815.js"><link rel="prefetch" href="/assets/js/268.add7eacb.js"><link rel="prefetch" href="/assets/js/269.7e49fcc7.js"><link rel="prefetch" href="/assets/js/27.5547e5f0.js"><link rel="prefetch" href="/assets/js/270.22342070.js"><link rel="prefetch" href="/assets/js/271.59917b1a.js"><link rel="prefetch" href="/assets/js/272.4a4751d5.js"><link rel="prefetch" href="/assets/js/273.f4c2fa5c.js"><link rel="prefetch" href="/assets/js/274.1208bc94.js"><link rel="prefetch" href="/assets/js/275.f6528753.js"><link rel="prefetch" href="/assets/js/276.a68772cd.js"><link rel="prefetch" href="/assets/js/277.f154ab32.js"><link rel="prefetch" href="/assets/js/278.bb616a63.js"><link rel="prefetch" href="/assets/js/279.6a356cff.js"><link rel="prefetch" href="/assets/js/28.b08b2847.js"><link rel="prefetch" href="/assets/js/280.5afc20fc.js"><link rel="prefetch" href="/assets/js/281.3cd86225.js"><link rel="prefetch" href="/assets/js/282.3ecb92aa.js"><link rel="prefetch" href="/assets/js/283.85159ea7.js"><link rel="prefetch" href="/assets/js/284.b6545c68.js"><link rel="prefetch" href="/assets/js/285.5e83ee29.js"><link rel="prefetch" href="/assets/js/286.2aad298d.js"><link rel="prefetch" href="/assets/js/287.3ca76244.js"><link rel="prefetch" href="/assets/js/288.5b17963d.js"><link rel="prefetch" href="/assets/js/289.f47a759b.js"><link rel="prefetch" href="/assets/js/29.562dbf7d.js"><link rel="prefetch" href="/assets/js/290.36b603c7.js"><link rel="prefetch" href="/assets/js/291.a9bd8951.js"><link rel="prefetch" href="/assets/js/292.dfc54f28.js"><link rel="prefetch" href="/assets/js/293.2d061212.js"><link rel="prefetch" href="/assets/js/294.6d564a9e.js"><link rel="prefetch" href="/assets/js/295.a31dd593.js"><link rel="prefetch" href="/assets/js/296.3101e5e8.js"><link rel="prefetch" href="/assets/js/297.7efde936.js"><link rel="prefetch" href="/assets/js/298.8bb3aa68.js"><link rel="prefetch" href="/assets/js/299.8b51e6bd.js"><link rel="prefetch" href="/assets/js/3.76257eb7.js"><link rel="prefetch" href="/assets/js/30.221adea2.js"><link rel="prefetch" href="/assets/js/300.62effe45.js"><link rel="prefetch" href="/assets/js/301.98c863c5.js"><link rel="prefetch" href="/assets/js/302.e3493ab2.js"><link rel="prefetch" href="/assets/js/303.800c8028.js"><link rel="prefetch" href="/assets/js/304.b6f08986.js"><link rel="prefetch" href="/assets/js/305.09af356b.js"><link rel="prefetch" href="/assets/js/306.d0d3589d.js"><link rel="prefetch" href="/assets/js/307.ee2fd249.js"><link rel="prefetch" href="/assets/js/308.f3f76368.js"><link rel="prefetch" href="/assets/js/309.d2b5ce40.js"><link rel="prefetch" href="/assets/js/31.334fc8bb.js"><link rel="prefetch" href="/assets/js/310.b4fa2feb.js"><link rel="prefetch" href="/assets/js/311.7d747ef3.js"><link rel="prefetch" href="/assets/js/312.89bdff40.js"><link rel="prefetch" href="/assets/js/313.875b82fe.js"><link rel="prefetch" href="/assets/js/314.0bbe51c4.js"><link rel="prefetch" href="/assets/js/315.cc07dbcf.js"><link rel="prefetch" href="/assets/js/316.bc72b152.js"><link rel="prefetch" href="/assets/js/317.55462812.js"><link rel="prefetch" href="/assets/js/318.a158fda0.js"><link rel="prefetch" href="/assets/js/319.b03a5bd2.js"><link rel="prefetch" href="/assets/js/32.d6826b16.js"><link rel="prefetch" href="/assets/js/320.a5bd19b0.js"><link rel="prefetch" href="/assets/js/321.4f9faaa7.js"><link rel="prefetch" href="/assets/js/322.dbd3b4fa.js"><link rel="prefetch" href="/assets/js/323.a04e2062.js"><link rel="prefetch" href="/assets/js/324.c45b46cf.js"><link rel="prefetch" href="/assets/js/325.cd1460c4.js"><link rel="prefetch" href="/assets/js/326.bd90ef85.js"><link rel="prefetch" href="/assets/js/327.8bf38ef7.js"><link rel="prefetch" href="/assets/js/328.99e9aed3.js"><link rel="prefetch" href="/assets/js/329.de0012cb.js"><link rel="prefetch" href="/assets/js/33.b1059062.js"><link rel="prefetch" href="/assets/js/330.59f11391.js"><link rel="prefetch" href="/assets/js/331.6d16a13c.js"><link rel="prefetch" href="/assets/js/332.922ca235.js"><link rel="prefetch" href="/assets/js/333.c94c3602.js"><link rel="prefetch" href="/assets/js/334.77e02010.js"><link rel="prefetch" href="/assets/js/335.1e0c4f7b.js"><link rel="prefetch" href="/assets/js/336.5675dc4f.js"><link rel="prefetch" href="/assets/js/337.bb6e11dc.js"><link rel="prefetch" href="/assets/js/338.294981e9.js"><link rel="prefetch" href="/assets/js/339.d0376372.js"><link rel="prefetch" href="/assets/js/34.0c7d5782.js"><link rel="prefetch" href="/assets/js/340.64596428.js"><link rel="prefetch" href="/assets/js/341.ec0f9409.js"><link rel="prefetch" href="/assets/js/342.7abc47c4.js"><link rel="prefetch" href="/assets/js/343.4262d486.js"><link rel="prefetch" href="/assets/js/344.8729ad8c.js"><link rel="prefetch" href="/assets/js/345.c210d888.js"><link rel="prefetch" href="/assets/js/346.6f42f7cb.js"><link rel="prefetch" href="/assets/js/347.81b41ae5.js"><link rel="prefetch" href="/assets/js/348.07eca37c.js"><link rel="prefetch" href="/assets/js/349.8019d6f3.js"><link rel="prefetch" href="/assets/js/35.ae14e37f.js"><link rel="prefetch" href="/assets/js/350.57da2e7b.js"><link rel="prefetch" href="/assets/js/351.2e99afdf.js"><link rel="prefetch" href="/assets/js/352.67dd88b7.js"><link rel="prefetch" href="/assets/js/353.15b9f624.js"><link rel="prefetch" href="/assets/js/354.a63e8432.js"><link rel="prefetch" href="/assets/js/355.bbc16ee9.js"><link rel="prefetch" href="/assets/js/356.ff63d3bb.js"><link rel="prefetch" href="/assets/js/357.4fb2d941.js"><link rel="prefetch" href="/assets/js/358.55182977.js"><link rel="prefetch" href="/assets/js/359.265c3d26.js"><link rel="prefetch" href="/assets/js/36.b9ed4cf1.js"><link rel="prefetch" href="/assets/js/360.ced80eb3.js"><link rel="prefetch" href="/assets/js/361.afe6ba84.js"><link rel="prefetch" href="/assets/js/362.c2b62518.js"><link rel="prefetch" href="/assets/js/363.0c4a4800.js"><link rel="prefetch" href="/assets/js/364.ce60291b.js"><link rel="prefetch" href="/assets/js/365.0e3a61f9.js"><link rel="prefetch" href="/assets/js/366.d53ccb03.js"><link rel="prefetch" href="/assets/js/367.689e464d.js"><link rel="prefetch" href="/assets/js/368.418c571f.js"><link rel="prefetch" href="/assets/js/369.c2fff3c8.js"><link rel="prefetch" href="/assets/js/37.a021ac57.js"><link rel="prefetch" href="/assets/js/370.a932b958.js"><link rel="prefetch" href="/assets/js/371.7d153241.js"><link rel="prefetch" href="/assets/js/372.fb9878fa.js"><link rel="prefetch" href="/assets/js/373.85772e03.js"><link rel="prefetch" href="/assets/js/374.b4a8b1b6.js"><link rel="prefetch" href="/assets/js/375.32f70596.js"><link rel="prefetch" href="/assets/js/376.a16d79a8.js"><link rel="prefetch" href="/assets/js/377.c996b7e1.js"><link rel="prefetch" href="/assets/js/378.d37d15c7.js"><link rel="prefetch" href="/assets/js/379.b81ba7dd.js"><link rel="prefetch" href="/assets/js/38.89138658.js"><link rel="prefetch" href="/assets/js/380.524c9b31.js"><link rel="prefetch" href="/assets/js/381.7ebfd6db.js"><link rel="prefetch" href="/assets/js/382.29edda0f.js"><link rel="prefetch" href="/assets/js/383.9642a212.js"><link rel="prefetch" href="/assets/js/384.086e3b42.js"><link rel="prefetch" href="/assets/js/385.a9bb46a8.js"><link rel="prefetch" href="/assets/js/386.f2561a39.js"><link rel="prefetch" href="/assets/js/387.ba9b6aaa.js"><link rel="prefetch" href="/assets/js/388.e0ace495.js"><link rel="prefetch" href="/assets/js/389.ba8c09dd.js"><link rel="prefetch" href="/assets/js/39.04f331e3.js"><link rel="prefetch" href="/assets/js/390.de1bb48b.js"><link rel="prefetch" href="/assets/js/391.7cc6edeb.js"><link rel="prefetch" href="/assets/js/392.0493a6f7.js"><link rel="prefetch" href="/assets/js/393.ba2d3e62.js"><link rel="prefetch" href="/assets/js/394.b3aa9224.js"><link rel="prefetch" href="/assets/js/395.f4df3a60.js"><link rel="prefetch" href="/assets/js/396.09644790.js"><link rel="prefetch" href="/assets/js/397.76163964.js"><link rel="prefetch" href="/assets/js/398.377fd8fc.js"><link rel="prefetch" href="/assets/js/399.39059be5.js"><link rel="prefetch" href="/assets/js/40.a21abf05.js"><link rel="prefetch" href="/assets/js/400.559a547f.js"><link rel="prefetch" href="/assets/js/401.bc6d738c.js"><link rel="prefetch" href="/assets/js/402.c504ed7b.js"><link rel="prefetch" href="/assets/js/403.77a0af9c.js"><link rel="prefetch" href="/assets/js/404.0f408cc6.js"><link rel="prefetch" href="/assets/js/405.90b0bab6.js"><link rel="prefetch" href="/assets/js/406.01b11432.js"><link rel="prefetch" href="/assets/js/407.58991ce5.js"><link rel="prefetch" href="/assets/js/408.9806278e.js"><link rel="prefetch" href="/assets/js/409.8d9b4bb3.js"><link rel="prefetch" href="/assets/js/41.6bcfc592.js"><link rel="prefetch" href="/assets/js/410.02dee620.js"><link rel="prefetch" href="/assets/js/411.3d12d3a6.js"><link rel="prefetch" href="/assets/js/412.37a62624.js"><link rel="prefetch" href="/assets/js/413.bda7ca34.js"><link rel="prefetch" href="/assets/js/414.2abb6547.js"><link rel="prefetch" href="/assets/js/415.1d271923.js"><link rel="prefetch" href="/assets/js/416.d1b11dfe.js"><link rel="prefetch" href="/assets/js/417.fcbf07ff.js"><link rel="prefetch" href="/assets/js/418.524d40ba.js"><link rel="prefetch" href="/assets/js/419.f264e463.js"><link rel="prefetch" href="/assets/js/42.ec85a270.js"><link rel="prefetch" href="/assets/js/420.8b99e60d.js"><link rel="prefetch" href="/assets/js/421.c697d876.js"><link rel="prefetch" href="/assets/js/422.4af54ae0.js"><link rel="prefetch" href="/assets/js/423.b75f24ff.js"><link rel="prefetch" href="/assets/js/424.ea80054f.js"><link rel="prefetch" href="/assets/js/425.804b48b0.js"><link rel="prefetch" href="/assets/js/426.ffed8383.js"><link rel="prefetch" href="/assets/js/427.2040bd22.js"><link rel="prefetch" href="/assets/js/428.b878fb56.js"><link rel="prefetch" href="/assets/js/429.f81fd922.js"><link rel="prefetch" href="/assets/js/43.c174449d.js"><link rel="prefetch" href="/assets/js/430.16f328ab.js"><link rel="prefetch" href="/assets/js/431.56f11924.js"><link rel="prefetch" href="/assets/js/432.e4c77710.js"><link rel="prefetch" href="/assets/js/433.29acf14b.js"><link rel="prefetch" href="/assets/js/434.33ee22fc.js"><link rel="prefetch" href="/assets/js/435.516f7600.js"><link rel="prefetch" href="/assets/js/436.28ae526a.js"><link rel="prefetch" href="/assets/js/437.b9bac473.js"><link rel="prefetch" href="/assets/js/438.711bd934.js"><link rel="prefetch" href="/assets/js/439.fe5f28bd.js"><link rel="prefetch" href="/assets/js/44.8704338b.js"><link rel="prefetch" href="/assets/js/440.b2f48747.js"><link rel="prefetch" href="/assets/js/441.4862a724.js"><link rel="prefetch" href="/assets/js/442.751f8ae7.js"><link rel="prefetch" href="/assets/js/443.9998dbe9.js"><link rel="prefetch" href="/assets/js/444.23d3f688.js"><link rel="prefetch" href="/assets/js/445.72419f35.js"><link rel="prefetch" href="/assets/js/446.21e02b7b.js"><link rel="prefetch" href="/assets/js/447.6bd039e5.js"><link rel="prefetch" href="/assets/js/448.af29ff31.js"><link rel="prefetch" href="/assets/js/449.bbdca196.js"><link rel="prefetch" href="/assets/js/45.f8a2a3b3.js"><link rel="prefetch" href="/assets/js/450.32e470b8.js"><link rel="prefetch" href="/assets/js/451.f4c8ff6a.js"><link rel="prefetch" href="/assets/js/452.c0ec8943.js"><link rel="prefetch" href="/assets/js/453.5af475c6.js"><link rel="prefetch" href="/assets/js/454.567aa6c1.js"><link rel="prefetch" href="/assets/js/455.326072d1.js"><link rel="prefetch" href="/assets/js/456.64b88847.js"><link rel="prefetch" href="/assets/js/457.61c91559.js"><link rel="prefetch" href="/assets/js/458.4f4d43d6.js"><link rel="prefetch" href="/assets/js/459.a88891cb.js"><link rel="prefetch" href="/assets/js/46.90855a0f.js"><link rel="prefetch" href="/assets/js/460.fb9e15f6.js"><link rel="prefetch" href="/assets/js/461.998a4991.js"><link rel="prefetch" href="/assets/js/462.56ecfb03.js"><link rel="prefetch" href="/assets/js/463.582cd053.js"><link rel="prefetch" href="/assets/js/464.f12a0050.js"><link rel="prefetch" href="/assets/js/465.cc3b08a8.js"><link rel="prefetch" href="/assets/js/466.ea7e4ce2.js"><link rel="prefetch" href="/assets/js/467.58700d93.js"><link rel="prefetch" href="/assets/js/468.bb9998cd.js"><link rel="prefetch" href="/assets/js/469.232d261d.js"><link rel="prefetch" href="/assets/js/47.02516d33.js"><link rel="prefetch" href="/assets/js/470.90ab2be8.js"><link rel="prefetch" href="/assets/js/471.3652fec6.js"><link rel="prefetch" href="/assets/js/472.bc7517c9.js"><link rel="prefetch" href="/assets/js/473.27b7892f.js"><link rel="prefetch" href="/assets/js/474.0d488768.js"><link rel="prefetch" href="/assets/js/475.bc33cf17.js"><link rel="prefetch" href="/assets/js/476.76ce67eb.js"><link rel="prefetch" href="/assets/js/477.a20657f6.js"><link rel="prefetch" href="/assets/js/478.8905ef26.js"><link rel="prefetch" href="/assets/js/479.23ec3dc9.js"><link rel="prefetch" href="/assets/js/48.8d38983c.js"><link rel="prefetch" href="/assets/js/480.105bf58e.js"><link rel="prefetch" href="/assets/js/481.d62a3699.js"><link rel="prefetch" href="/assets/js/482.6cb10cdb.js"><link rel="prefetch" href="/assets/js/483.15b9ef53.js"><link rel="prefetch" href="/assets/js/484.794aff9c.js"><link rel="prefetch" href="/assets/js/485.3e6ef3cb.js"><link rel="prefetch" href="/assets/js/486.fc20eb22.js"><link rel="prefetch" href="/assets/js/487.2a4f7d47.js"><link rel="prefetch" href="/assets/js/488.24ba9af5.js"><link rel="prefetch" href="/assets/js/489.d451928e.js"><link rel="prefetch" href="/assets/js/49.bd70c59c.js"><link rel="prefetch" href="/assets/js/490.d83e4fc7.js"><link rel="prefetch" href="/assets/js/491.0210a738.js"><link rel="prefetch" href="/assets/js/492.3a69cd85.js"><link rel="prefetch" href="/assets/js/493.89d2920f.js"><link rel="prefetch" href="/assets/js/494.b7d1c15e.js"><link rel="prefetch" href="/assets/js/495.7ccfe17f.js"><link rel="prefetch" href="/assets/js/496.0d6c912a.js"><link rel="prefetch" href="/assets/js/497.087ca2c6.js"><link rel="prefetch" href="/assets/js/498.f2b3c894.js"><link rel="prefetch" href="/assets/js/499.e741f312.js"><link rel="prefetch" href="/assets/js/5.405f2620.js"><link rel="prefetch" href="/assets/js/50.9df07553.js"><link rel="prefetch" href="/assets/js/500.cb9babb9.js"><link rel="prefetch" href="/assets/js/501.63a859b6.js"><link rel="prefetch" href="/assets/js/502.f346b273.js"><link rel="prefetch" href="/assets/js/503.cdcd3de3.js"><link rel="prefetch" href="/assets/js/504.e83ec450.js"><link rel="prefetch" href="/assets/js/505.95f18293.js"><link rel="prefetch" href="/assets/js/506.02060a3c.js"><link rel="prefetch" href="/assets/js/507.859d6ae4.js"><link rel="prefetch" href="/assets/js/508.9724d886.js"><link rel="prefetch" href="/assets/js/509.e17dd53e.js"><link rel="prefetch" href="/assets/js/51.3dfc6350.js"><link rel="prefetch" href="/assets/js/510.ea0c942f.js"><link rel="prefetch" href="/assets/js/511.64a7f9a8.js"><link rel="prefetch" href="/assets/js/512.6cce418a.js"><link rel="prefetch" href="/assets/js/513.ea813fe8.js"><link rel="prefetch" href="/assets/js/514.10242470.js"><link rel="prefetch" href="/assets/js/515.5308bdf6.js"><link rel="prefetch" href="/assets/js/516.dfb113bc.js"><link rel="prefetch" href="/assets/js/517.96c71069.js"><link rel="prefetch" href="/assets/js/518.5594480e.js"><link rel="prefetch" href="/assets/js/519.91e848ae.js"><link rel="prefetch" href="/assets/js/52.dd230cd7.js"><link rel="prefetch" href="/assets/js/520.ebe69ce9.js"><link rel="prefetch" href="/assets/js/521.92b80342.js"><link rel="prefetch" href="/assets/js/522.6ce581ea.js"><link rel="prefetch" href="/assets/js/523.40b7f2f9.js"><link rel="prefetch" href="/assets/js/524.4ef256d3.js"><link rel="prefetch" href="/assets/js/525.19741e4a.js"><link rel="prefetch" href="/assets/js/526.e5de1675.js"><link rel="prefetch" href="/assets/js/527.9a79cd42.js"><link rel="prefetch" href="/assets/js/528.72732eb8.js"><link rel="prefetch" href="/assets/js/529.2ea03e45.js"><link rel="prefetch" href="/assets/js/53.a349c565.js"><link rel="prefetch" href="/assets/js/530.5d1103e7.js"><link rel="prefetch" href="/assets/js/531.82b032d6.js"><link rel="prefetch" href="/assets/js/532.12ee4beb.js"><link rel="prefetch" href="/assets/js/533.db9a90f7.js"><link rel="prefetch" href="/assets/js/534.fe139db4.js"><link rel="prefetch" href="/assets/js/535.056a6fbb.js"><link rel="prefetch" href="/assets/js/536.6bf85c15.js"><link rel="prefetch" href="/assets/js/537.6e2e1ccf.js"><link rel="prefetch" href="/assets/js/538.54eddb3b.js"><link rel="prefetch" href="/assets/js/539.6f00a207.js"><link rel="prefetch" href="/assets/js/54.e292b52f.js"><link rel="prefetch" href="/assets/js/540.9c956205.js"><link rel="prefetch" href="/assets/js/541.50f41228.js"><link rel="prefetch" href="/assets/js/542.a2b1879e.js"><link rel="prefetch" href="/assets/js/543.4e5e17c9.js"><link rel="prefetch" href="/assets/js/544.63d85227.js"><link rel="prefetch" href="/assets/js/545.c3923644.js"><link rel="prefetch" href="/assets/js/546.e64ad073.js"><link rel="prefetch" href="/assets/js/547.35a8752d.js"><link rel="prefetch" href="/assets/js/548.b62a1348.js"><link rel="prefetch" href="/assets/js/549.369e2ea0.js"><link rel="prefetch" href="/assets/js/55.21bb2983.js"><link rel="prefetch" href="/assets/js/550.b4632248.js"><link rel="prefetch" href="/assets/js/551.18f1879c.js"><link rel="prefetch" href="/assets/js/552.162e63cd.js"><link rel="prefetch" href="/assets/js/553.6998130e.js"><link rel="prefetch" href="/assets/js/554.89126c3d.js"><link rel="prefetch" href="/assets/js/555.a5f63b8a.js"><link rel="prefetch" href="/assets/js/556.35381cef.js"><link rel="prefetch" href="/assets/js/557.ceeecf52.js"><link rel="prefetch" href="/assets/js/558.253e6e4f.js"><link rel="prefetch" href="/assets/js/559.5cfbb773.js"><link rel="prefetch" href="/assets/js/56.5382d6b4.js"><link rel="prefetch" href="/assets/js/560.cca52f22.js"><link rel="prefetch" href="/assets/js/561.ea8d1141.js"><link rel="prefetch" href="/assets/js/562.c32e7b96.js"><link rel="prefetch" href="/assets/js/563.9bdd42e7.js"><link rel="prefetch" href="/assets/js/564.b3b87ec0.js"><link rel="prefetch" href="/assets/js/565.4be0d0f7.js"><link rel="prefetch" href="/assets/js/566.9f379d12.js"><link rel="prefetch" href="/assets/js/567.261e3181.js"><link rel="prefetch" href="/assets/js/568.4229e365.js"><link rel="prefetch" href="/assets/js/569.e662c167.js"><link rel="prefetch" href="/assets/js/57.8129f7e0.js"><link rel="prefetch" href="/assets/js/570.97ff6423.js"><link rel="prefetch" href="/assets/js/571.de1377cd.js"><link rel="prefetch" href="/assets/js/572.48b8400b.js"><link rel="prefetch" href="/assets/js/573.8251ebaf.js"><link rel="prefetch" href="/assets/js/574.ec3d6c1e.js"><link rel="prefetch" href="/assets/js/575.b0d429a1.js"><link rel="prefetch" href="/assets/js/576.98ce9170.js"><link rel="prefetch" href="/assets/js/577.85fc2017.js"><link rel="prefetch" href="/assets/js/578.1393ac7f.js"><link rel="prefetch" href="/assets/js/579.1340e178.js"><link rel="prefetch" href="/assets/js/58.85ac2740.js"><link rel="prefetch" href="/assets/js/580.a5979445.js"><link rel="prefetch" href="/assets/js/581.effdc269.js"><link rel="prefetch" href="/assets/js/582.13276063.js"><link rel="prefetch" href="/assets/js/583.357a2443.js"><link rel="prefetch" href="/assets/js/584.338ef731.js"><link rel="prefetch" href="/assets/js/585.87932741.js"><link rel="prefetch" href="/assets/js/586.b1d6e000.js"><link rel="prefetch" href="/assets/js/587.ed5b8377.js"><link rel="prefetch" href="/assets/js/588.16d2c418.js"><link rel="prefetch" href="/assets/js/589.c96fd7fa.js"><link rel="prefetch" href="/assets/js/59.0b225757.js"><link rel="prefetch" href="/assets/js/590.1a06b2a0.js"><link rel="prefetch" href="/assets/js/591.0efd886c.js"><link rel="prefetch" href="/assets/js/592.b22d0ef5.js"><link rel="prefetch" href="/assets/js/593.84ed6ebe.js"><link rel="prefetch" href="/assets/js/594.cd721b88.js"><link rel="prefetch" href="/assets/js/595.2400817a.js"><link rel="prefetch" href="/assets/js/596.f2c512d1.js"><link rel="prefetch" href="/assets/js/597.df10ec57.js"><link rel="prefetch" href="/assets/js/598.61ef6a7d.js"><link rel="prefetch" href="/assets/js/599.0bebb562.js"><link rel="prefetch" href="/assets/js/6.29d112b1.js"><link rel="prefetch" href="/assets/js/60.3bbab51d.js"><link rel="prefetch" href="/assets/js/600.1ea7596f.js"><link rel="prefetch" href="/assets/js/601.f2642bb3.js"><link rel="prefetch" href="/assets/js/602.400cc987.js"><link rel="prefetch" href="/assets/js/603.db77d173.js"><link rel="prefetch" href="/assets/js/604.0ffa30ae.js"><link rel="prefetch" href="/assets/js/605.32ca9607.js"><link rel="prefetch" href="/assets/js/606.8c1e5683.js"><link rel="prefetch" href="/assets/js/607.9c9463ef.js"><link rel="prefetch" href="/assets/js/608.d5efa77e.js"><link rel="prefetch" href="/assets/js/609.5bbffb7d.js"><link rel="prefetch" href="/assets/js/61.f7301486.js"><link rel="prefetch" href="/assets/js/610.5b0fc9da.js"><link rel="prefetch" href="/assets/js/611.bb8058c9.js"><link rel="prefetch" href="/assets/js/612.b0788f43.js"><link rel="prefetch" href="/assets/js/613.49511e65.js"><link rel="prefetch" href="/assets/js/614.fae3eacf.js"><link rel="prefetch" href="/assets/js/615.359e5899.js"><link rel="prefetch" href="/assets/js/616.905132f4.js"><link rel="prefetch" href="/assets/js/617.6c8c594e.js"><link rel="prefetch" href="/assets/js/618.6ac4f3ff.js"><link rel="prefetch" href="/assets/js/619.411a0c14.js"><link rel="prefetch" href="/assets/js/62.9aeede84.js"><link rel="prefetch" href="/assets/js/620.56155724.js"><link rel="prefetch" href="/assets/js/621.149d7933.js"><link rel="prefetch" href="/assets/js/622.f0c9bc08.js"><link rel="prefetch" href="/assets/js/623.e0989fbe.js"><link rel="prefetch" href="/assets/js/624.80b1f6a9.js"><link rel="prefetch" href="/assets/js/625.a0a392c4.js"><link rel="prefetch" href="/assets/js/626.56fd4e8a.js"><link rel="prefetch" href="/assets/js/627.264e7313.js"><link rel="prefetch" href="/assets/js/628.7a868b19.js"><link rel="prefetch" href="/assets/js/629.e7e15da1.js"><link rel="prefetch" href="/assets/js/63.4df55c8b.js"><link rel="prefetch" href="/assets/js/630.998c9b61.js"><link rel="prefetch" href="/assets/js/631.69aa049c.js"><link rel="prefetch" href="/assets/js/632.da3882c1.js"><link rel="prefetch" href="/assets/js/633.0d49adf0.js"><link rel="prefetch" href="/assets/js/634.f9984ede.js"><link rel="prefetch" href="/assets/js/635.f0439f65.js"><link rel="prefetch" href="/assets/js/636.54de4194.js"><link rel="prefetch" href="/assets/js/637.55d1c226.js"><link rel="prefetch" href="/assets/js/638.2a9a510f.js"><link rel="prefetch" href="/assets/js/639.8bec360e.js"><link rel="prefetch" href="/assets/js/64.7f3e5e81.js"><link rel="prefetch" href="/assets/js/640.30d7f96e.js"><link rel="prefetch" href="/assets/js/641.68100098.js"><link rel="prefetch" href="/assets/js/642.4b793817.js"><link rel="prefetch" href="/assets/js/643.d86a81ea.js"><link rel="prefetch" href="/assets/js/644.76327ea2.js"><link rel="prefetch" href="/assets/js/645.0ac6a923.js"><link rel="prefetch" href="/assets/js/646.cd92f728.js"><link rel="prefetch" href="/assets/js/647.f2c624e1.js"><link rel="prefetch" href="/assets/js/648.c8f3b955.js"><link rel="prefetch" href="/assets/js/649.6370753b.js"><link rel="prefetch" href="/assets/js/65.2beeae9b.js"><link rel="prefetch" href="/assets/js/650.afe31909.js"><link rel="prefetch" href="/assets/js/651.87971ec0.js"><link rel="prefetch" href="/assets/js/652.0adf10a6.js"><link rel="prefetch" href="/assets/js/653.1f655726.js"><link rel="prefetch" href="/assets/js/654.53e24c7c.js"><link rel="prefetch" href="/assets/js/655.c95a66ea.js"><link rel="prefetch" href="/assets/js/656.38b5a5ea.js"><link rel="prefetch" href="/assets/js/657.3167aa94.js"><link rel="prefetch" href="/assets/js/658.7c40ff62.js"><link rel="prefetch" href="/assets/js/659.5d2b9b54.js"><link rel="prefetch" href="/assets/js/66.44b214db.js"><link rel="prefetch" href="/assets/js/660.96a8da9e.js"><link rel="prefetch" href="/assets/js/661.4de3b6c1.js"><link rel="prefetch" href="/assets/js/662.7d9bf181.js"><link rel="prefetch" href="/assets/js/663.4ccaf40a.js"><link rel="prefetch" href="/assets/js/664.7ab4fa53.js"><link rel="prefetch" href="/assets/js/665.32245d26.js"><link rel="prefetch" href="/assets/js/666.e6617151.js"><link rel="prefetch" href="/assets/js/667.fb3b0547.js"><link rel="prefetch" href="/assets/js/668.3d1b2e36.js"><link rel="prefetch" href="/assets/js/669.b769905f.js"><link rel="prefetch" href="/assets/js/67.c31aaacf.js"><link rel="prefetch" href="/assets/js/670.88ed3af3.js"><link rel="prefetch" href="/assets/js/671.1aff6bfe.js"><link rel="prefetch" href="/assets/js/672.c90888f7.js"><link rel="prefetch" href="/assets/js/673.81241fdc.js"><link rel="prefetch" href="/assets/js/674.838a424d.js"><link rel="prefetch" href="/assets/js/675.603ac896.js"><link rel="prefetch" href="/assets/js/676.ff44b5dc.js"><link rel="prefetch" href="/assets/js/678.f0eb8d04.js"><link rel="prefetch" href="/assets/js/679.db78199e.js"><link rel="prefetch" href="/assets/js/68.08607c89.js"><link rel="prefetch" href="/assets/js/680.8fded9d4.js"><link rel="prefetch" href="/assets/js/681.0b019dfd.js"><link rel="prefetch" href="/assets/js/682.746e9190.js"><link rel="prefetch" href="/assets/js/683.d5c00845.js"><link rel="prefetch" href="/assets/js/684.b3207cad.js"><link rel="prefetch" href="/assets/js/685.d78f18ba.js"><link rel="prefetch" href="/assets/js/686.5aaecd19.js"><link rel="prefetch" href="/assets/js/687.821a06f4.js"><link rel="prefetch" href="/assets/js/688.8bbc1890.js"><link rel="prefetch" href="/assets/js/689.79b49e8c.js"><link rel="prefetch" href="/assets/js/69.509245d6.js"><link rel="prefetch" href="/assets/js/690.fa62f9dd.js"><link rel="prefetch" href="/assets/js/691.d3eb1a60.js"><link rel="prefetch" href="/assets/js/692.738f14bb.js"><link rel="prefetch" href="/assets/js/693.e6a497a2.js"><link rel="prefetch" href="/assets/js/694.6eea1c54.js"><link rel="prefetch" href="/assets/js/695.88e6acee.js"><link rel="prefetch" href="/assets/js/696.de10297f.js"><link rel="prefetch" href="/assets/js/697.96d04062.js"><link rel="prefetch" href="/assets/js/698.200cc84f.js"><link rel="prefetch" href="/assets/js/699.f11fc627.js"><link rel="prefetch" href="/assets/js/7.c16198b8.js"><link rel="prefetch" href="/assets/js/70.5f6285b1.js"><link rel="prefetch" href="/assets/js/700.93d48f59.js"><link rel="prefetch" href="/assets/js/701.b861f29a.js"><link rel="prefetch" href="/assets/js/702.dc82e05c.js"><link rel="prefetch" href="/assets/js/703.625ce87c.js"><link rel="prefetch" href="/assets/js/704.005a0a7c.js"><link rel="prefetch" href="/assets/js/705.16ad9230.js"><link rel="prefetch" href="/assets/js/706.4eead30a.js"><link rel="prefetch" href="/assets/js/707.730306ce.js"><link rel="prefetch" href="/assets/js/708.e37e743a.js"><link rel="prefetch" href="/assets/js/709.f2144f52.js"><link rel="prefetch" href="/assets/js/71.d5d0dae5.js"><link rel="prefetch" href="/assets/js/710.ee9d9b17.js"><link rel="prefetch" href="/assets/js/711.2813c338.js"><link rel="prefetch" href="/assets/js/712.e801bce4.js"><link rel="prefetch" href="/assets/js/713.21fc267c.js"><link rel="prefetch" href="/assets/js/714.4ec35525.js"><link rel="prefetch" href="/assets/js/715.fdc3cc84.js"><link rel="prefetch" href="/assets/js/716.324932ad.js"><link rel="prefetch" href="/assets/js/717.a072a66f.js"><link rel="prefetch" href="/assets/js/718.575e0305.js"><link rel="prefetch" href="/assets/js/719.5fdd55de.js"><link rel="prefetch" href="/assets/js/72.25648231.js"><link rel="prefetch" href="/assets/js/720.61477f23.js"><link rel="prefetch" href="/assets/js/721.c8bdab00.js"><link rel="prefetch" href="/assets/js/722.9255f385.js"><link rel="prefetch" href="/assets/js/723.f27792a4.js"><link rel="prefetch" href="/assets/js/724.cd504f88.js"><link rel="prefetch" href="/assets/js/725.55c845fa.js"><link rel="prefetch" href="/assets/js/726.bb49a9db.js"><link rel="prefetch" href="/assets/js/727.53d587fe.js"><link rel="prefetch" href="/assets/js/728.86972387.js"><link rel="prefetch" href="/assets/js/729.02fa0263.js"><link rel="prefetch" href="/assets/js/73.29902c1f.js"><link rel="prefetch" href="/assets/js/730.817156d1.js"><link rel="prefetch" href="/assets/js/731.6f5d6735.js"><link rel="prefetch" href="/assets/js/732.9a5ff781.js"><link rel="prefetch" href="/assets/js/733.bcb13916.js"><link rel="prefetch" href="/assets/js/734.11482b19.js"><link rel="prefetch" href="/assets/js/735.8c0d62f3.js"><link rel="prefetch" href="/assets/js/736.06465705.js"><link rel="prefetch" href="/assets/js/737.79741d87.js"><link rel="prefetch" href="/assets/js/738.cad12ff9.js"><link rel="prefetch" href="/assets/js/739.cb09e552.js"><link rel="prefetch" href="/assets/js/74.bcf666a0.js"><link rel="prefetch" href="/assets/js/740.029b1950.js"><link rel="prefetch" href="/assets/js/741.b937216a.js"><link rel="prefetch" href="/assets/js/742.ec02c706.js"><link rel="prefetch" href="/assets/js/743.70a96283.js"><link rel="prefetch" href="/assets/js/744.909b870c.js"><link rel="prefetch" href="/assets/js/745.80defb2d.js"><link rel="prefetch" href="/assets/js/746.fb972248.js"><link rel="prefetch" href="/assets/js/747.1a7b52fd.js"><link rel="prefetch" href="/assets/js/748.036f5d16.js"><link rel="prefetch" href="/assets/js/749.bd9a413d.js"><link rel="prefetch" href="/assets/js/75.23c5a54d.js"><link rel="prefetch" href="/assets/js/750.3f1ae8f5.js"><link rel="prefetch" href="/assets/js/751.8897bc9f.js"><link rel="prefetch" href="/assets/js/752.9b387659.js"><link rel="prefetch" href="/assets/js/753.f411ce21.js"><link rel="prefetch" href="/assets/js/754.26def684.js"><link rel="prefetch" href="/assets/js/755.923aff62.js"><link rel="prefetch" href="/assets/js/756.9965743a.js"><link rel="prefetch" href="/assets/js/757.0c6bbbfd.js"><link rel="prefetch" href="/assets/js/758.a830f8b1.js"><link rel="prefetch" href="/assets/js/759.987cad77.js"><link rel="prefetch" href="/assets/js/76.f54f3d4f.js"><link rel="prefetch" href="/assets/js/760.9f2652a0.js"><link rel="prefetch" href="/assets/js/761.df01a0ee.js"><link rel="prefetch" href="/assets/js/762.e0c05a1a.js"><link rel="prefetch" href="/assets/js/763.da8a60bd.js"><link rel="prefetch" href="/assets/js/764.9f2a2830.js"><link rel="prefetch" href="/assets/js/765.44e61161.js"><link rel="prefetch" href="/assets/js/766.cd7da8c1.js"><link rel="prefetch" href="/assets/js/767.6ea1fea2.js"><link rel="prefetch" href="/assets/js/768.91529b8f.js"><link rel="prefetch" href="/assets/js/769.194d7a3e.js"><link rel="prefetch" href="/assets/js/77.3d43a163.js"><link rel="prefetch" href="/assets/js/770.227fd5b9.js"><link rel="prefetch" href="/assets/js/771.44d5e37e.js"><link rel="prefetch" href="/assets/js/772.234d9bf6.js"><link rel="prefetch" href="/assets/js/773.ff1dfb6a.js"><link rel="prefetch" href="/assets/js/774.d401364f.js"><link rel="prefetch" href="/assets/js/775.37a7cf41.js"><link rel="prefetch" href="/assets/js/776.0cd10853.js"><link rel="prefetch" href="/assets/js/777.599a3a48.js"><link rel="prefetch" href="/assets/js/778.eef27a95.js"><link rel="prefetch" href="/assets/js/779.29351199.js"><link rel="prefetch" href="/assets/js/78.fd0780ac.js"><link rel="prefetch" href="/assets/js/780.74caed94.js"><link rel="prefetch" href="/assets/js/781.ee0fa9b5.js"><link rel="prefetch" href="/assets/js/782.7cffed09.js"><link rel="prefetch" href="/assets/js/783.7f01f518.js"><link rel="prefetch" href="/assets/js/784.5f65e3d7.js"><link rel="prefetch" href="/assets/js/785.d7e13880.js"><link rel="prefetch" href="/assets/js/786.6110d12f.js"><link rel="prefetch" href="/assets/js/787.334a5cdd.js"><link rel="prefetch" href="/assets/js/788.f261bc71.js"><link rel="prefetch" href="/assets/js/789.b6d74f7d.js"><link rel="prefetch" href="/assets/js/79.7b5d6224.js"><link rel="prefetch" href="/assets/js/790.fa948ec4.js"><link rel="prefetch" href="/assets/js/791.22080013.js"><link rel="prefetch" href="/assets/js/792.31ce806c.js"><link rel="prefetch" href="/assets/js/793.9fd0c56f.js"><link rel="prefetch" href="/assets/js/794.44a8cd9c.js"><link rel="prefetch" href="/assets/js/795.9f8346e5.js"><link rel="prefetch" href="/assets/js/796.0de9c7a1.js"><link rel="prefetch" href="/assets/js/797.83ac32a6.js"><link rel="prefetch" href="/assets/js/798.393fc81d.js"><link rel="prefetch" href="/assets/js/799.c1fb3981.js"><link rel="prefetch" href="/assets/js/8.3275ed06.js"><link rel="prefetch" href="/assets/js/80.df3f0a1f.js"><link rel="prefetch" href="/assets/js/800.2832adeb.js"><link rel="prefetch" href="/assets/js/801.04c58fc4.js"><link rel="prefetch" href="/assets/js/81.3d90ef6b.js"><link rel="prefetch" href="/assets/js/82.2d42448d.js"><link rel="prefetch" href="/assets/js/83.900b4de2.js"><link rel="prefetch" href="/assets/js/84.ff570f67.js"><link rel="prefetch" href="/assets/js/85.e3b3af39.js"><link rel="prefetch" href="/assets/js/86.17b5aedc.js"><link rel="prefetch" href="/assets/js/87.f931d1d6.js"><link rel="prefetch" href="/assets/js/88.d55863cd.js"><link rel="prefetch" href="/assets/js/89.15a9a6d7.js"><link rel="prefetch" href="/assets/js/9.04948a9d.js"><link rel="prefetch" href="/assets/js/90.22696aa9.js"><link rel="prefetch" href="/assets/js/91.f1bd8a2e.js"><link rel="prefetch" href="/assets/js/92.85733094.js"><link rel="prefetch" href="/assets/js/93.59bacfd7.js"><link rel="prefetch" href="/assets/js/94.a5f9b7a0.js"><link rel="prefetch" href="/assets/js/95.be52d65a.js"><link rel="prefetch" href="/assets/js/96.0b76ba8e.js"><link rel="prefetch" href="/assets/js/97.28183cd4.js"><link rel="prefetch" href="/assets/js/98.2d22829c.js"><link rel="prefetch" href="/assets/js/99.ed602a20.js">
    <link rel="stylesheet" href="/assets/css/0.styles.a3df589e.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">AJ</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">主页</a></div><div class="nav-item"><a href="/op/" class="nav-link">Devops</a></div><div class="nav-item"><a href="/golang/" class="nav-link">Go</a></div><div class="nav-item"><a href="/go-block/" class="nav-link">区块链</a></div><div class="nav-item"><a href="/k8s/" class="nav-link">k8s</a></div><div class="nav-item"><a href="/about.html" class="nav-link">关于我</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/go-learning/" class="nav-link">go-learning</a></li><li class="dropdown-item"><!----> <a href="/post/flutter-guide/" class="nav-link">flutter</a></li><li class="dropdown-item"><!----> <a href="/mysql/" class="nav-link">mysql</a></li><li class="dropdown-item"><!----> <a href="/python/" class="nav-link">python</a></li></ul></div></div> <a href="https://github.com/ChinaArJun" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">主页</a></div><div class="nav-item"><a href="/op/" class="nav-link">Devops</a></div><div class="nav-item"><a href="/golang/" class="nav-link">Go</a></div><div class="nav-item"><a href="/go-block/" class="nav-link">区块链</a></div><div class="nav-item"><a href="/k8s/" class="nav-link">k8s</a></div><div class="nav-item"><a href="/about.html" class="nav-link">关于我</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/go-learning/" class="nav-link">go-learning</a></li><li class="dropdown-item"><!----> <a href="/post/flutter-guide/" class="nav-link">flutter</a></li><li class="dropdown-item"><!----> <a href="/mysql/" class="nav-link">mysql</a></li><li class="dropdown-item"><!----> <a href="/python/" class="nav-link">python</a></li></ul></div></div> <a href="https://github.com/ChinaArJun" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <div></div> <div style="padding-left:1.5rem;"><div></div></div> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>[翻译] Grid 布局完全指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/post/Grid-Guide/#简介" class="sidebar-link">简介</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/post/Grid-Guide/#基础与浏览器支持" class="sidebar-link">基础与浏览器支持</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/post/Grid-Guide/#重要术语" class="sidebar-link">重要术语</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid-container-（栅格容器）" class="sidebar-link">Grid Container （栅格容器）</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid-item-（栅格项目）" class="sidebar-link">Grid Item （栅格项目）</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid-line-（栅格线）" class="sidebar-link">Grid Line （栅格线）</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid-track-（栅格轨迹）" class="sidebar-link">Grid Track （栅格轨迹）</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid-cell-（栅格格子）" class="sidebar-link">Grid Cell （栅格格子）</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid-area-（栅格区域）" class="sidebar-link">Grid Area （栅格区域）</a></li></ul></li><li><a href="/post/Grid-Guide/#栅格属性内容表" class="sidebar-link">栅格属性内容表</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/post/Grid-Guide/#栅格容器属性（grid-container）" class="sidebar-link">栅格容器属性（Grid Container）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#display" class="sidebar-link">display</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid-template-columns-grid-template-rows" class="sidebar-link">grid-template-columns  grid-template-rows</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid-template-areas" class="sidebar-link">grid-template-areas</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid-template" class="sidebar-link">grid-template</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid-column-gap-grid-row-gap" class="sidebar-link">grid-column-gap  grid-row-gap</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid-gap" class="sidebar-link">grid-gap</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#justify-items" class="sidebar-link">justify-items</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#align-items" class="sidebar-link">align-items</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#justify-content" class="sidebar-link">justify-content</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#align-content" class="sidebar-link">align-content</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid-auto-columns-grid-auto-rows" class="sidebar-link">grid-auto-columns  grid-auto-rows</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid-auto-flow" class="sidebar-link">grid-auto-flow</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid" class="sidebar-link">grid</a></li></ul></li><li><a href="/post/Grid-Guide/#栅格项目属性-（grid-items）" class="sidebar-link">栅格项目属性 （Grid Items）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid-column-start-grid-column-end-grid-row-start-grid-row-end" class="sidebar-link">grid-column-start  grid-row-end</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid-column-grid-row" class="sidebar-link">grid-column  grid-row</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#grid-area" class="sidebar-link">grid-area</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#justify-self" class="sidebar-link">justify-self</a></li><li class="sidebar-sub-header"><a href="/post/Grid-Guide/#align-self" class="sidebar-link">align-self</a></li></ul></li></ul></section></li></ul> </aside> <!----> <!----> <main class="page"><div class="theme-default-content" style="margin-bottom:-5rem;"><div class="bar"><div class="bar-intro"><div class="text">
      流逝的是岁月，不变的是情怀.
        </div> <div class="text">
      坚持学习，是为了成就更好的自己. <br></div> <div>公众号[中关村程序员]</div></div></div> <!----></div> <div class="theme-default-content content__default"><p><a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank" rel="noopener noreferrer">英文链接<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h2 id="简介"><a href="#简介" class="header-anchor">#</a> <a href="#grid-introduction">简介</a></h2> <p>CSS 栅格布局 (亦称 &quot;Grid&quot;)，是一个基于栅格的二维布局系统，旨在彻底改变基于网格用户界面的设计。CSS 一直以来并没有把布局做的足够好。刚开始，我们使用 tables，后来是 floats，positioning 和 inline-block，这些本质上是一些 hacks 而且许多重要功能尚未解决（例如垂直居中）。Flexbox 可以做到这些，但是它主要用来一些简单的一维布局，并不适合复杂的二维布局（当然 Flexbox 与 Grid 可以一并使用）。Grid 是第一个为了解决布局问题的 CSS 模块，只要我们做过网页，就会遇到这些问题。</p> <p>有两件事情在激励着我创作这篇指南，首先是 Rachel Andrew 那本非常不错的书 <a href="http://abookapart.com/products/get-ready-for-css-grid-layout" target="_blank" rel="noopener noreferrer">Get Ready for CSS Grid Layout.<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，清晰透彻地介绍了 Grid，它是本篇文章的基础。我<strong>强烈建议</strong>你去购买并且阅读它。另一件事是 Chris Coyier 的文章 <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank" rel="noopener noreferrer">A Complete Guide to Flexbox<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，是关于 flexbox 的首选资源。它帮助了很多人，当你 Google &quot;flexbox&quot; 的时候，第一眼便能够看见它。或许你已经注意到我的文章与它有很大相似之处，但我们有什么理由不借鉴它呢？</p> <p>我会把 Grid 在最新版本规范上的概念呈现出来。因此，我将不会照顾过期的 IE 语法。当规范成熟时，我将尽可能去定期更新。</p> <h2 id="基础与浏览器支持"><a href="#基础与浏览器支持" class="header-anchor">#</a> <a href="#grid-browser-support">基础与浏览器支持</a></h2> <p>开始 Grid 是简单的，你仅仅需要在容器(container)元素上定义一个栅格使用 <code>display: grid</code>，并通过 <code>grid-template-columns</code> 与 <code>grid-template-rows</code> 设置行与列。通过设置 <code>grid-column</code> 和 <code>grid-row</code> 把子元素置于栅格中。与 <code>flexbox</code> 类似，栅格项目(items)的顺序是无关紧要的，你可以通过 CSS 来控制顺序。当使用媒体查询时，改变它们的顺序是极其简单的。假设你设计好了网页的布局，但你需要适应不同的屏幕宽度，这仅仅需要几行代码，Grid 是最为有效的模块。</p> <p><strong>关于 Grid 一件非常重要的事情是你还不能够在生产环境中使用它</strong>。它目前仅仅是一个 <a href="https://www.w3.org/TR/css-grid-1/" target="_blank" rel="noopener noreferrer">W3C工作草案<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，而且不能够被任何浏览器默认支持。虽然IE10 与 IE11 能够支持它，但使用了过期语法旧的实现。为了现在能够体验 Grid，最好的方法是使用 Chrome, Opera 或者 Firefox，并且开启特定的标志。在 Chrome 中，导航到 chrome://flags 并且开启 “experimental web platform features”。在 Opera 中同样如此（opera://flags）。在 Firefox 中，开启标志 layout.css.grid.enabled（about:config）。</p> <p>这有一张浏览器支持表格，我将保持更新。</p> <p>Chrome 29+ (Behind flag)
Safari Not supported
Firefox 40+ (Behind flag)
Opera 28+ (Behind flag)
IE 10+ (Old syntax)
Android Not supported
iOS Not supported</p> <blockquote><p>译者注：现在有些最新浏览器的最新版本已经能够支持，可以查看 <a href="caniuse.com">caniuse</a> 网站。</p></blockquote> <p>你在生产环境中使用它仅仅是一个时间问题。但是，学习正在当下！</p> <h2 id="重要术语"><a href="#重要术语" class="header-anchor">#</a> 重要术语</h2> <p>在深入了解 Grid 概念之前，了解它的术语是极为重要的。因为在此涉及到的术语概念相似，不易混淆。不过不用担心，他们并没有很多。</p> <h3 id="grid-container-（栅格容器）"><a href="#grid-container-（栅格容器）" class="header-anchor">#</a> Grid Container （栅格容器）</h3> <p>设置 <code>display: grid</code> 的元素，它是所有栅格项目的直接父级元素。在这个例子中，<code>container</code> 是栅格的容器。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item item-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item item-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item item-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="grid-item-（栅格项目）"><a href="#grid-item-（栅格项目）" class="header-anchor">#</a> Grid Item （栅格项目）</h3> <p>栅格容器的直接子代。在这里 <code>item</code> 是栅格项目，而 <code>sub-item</code> 不是栅格项目。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span> 
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>sub-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="grid-line-（栅格线）"><a href="#grid-line-（栅格线）" class="header-anchor">#</a> Grid Line （栅格线）</h3> <p>组成栅格结构的分割线。它们位于行与列的两侧，有的是垂直的（列栅格线），有的是水平的（行栅格线）。以下黄色线是一个列栅格线。</p> <p><img src="http://p0.qhimg.com/t010b0d593c912074bc.png" alt="Grid line"></p> <h3 id="grid-track-（栅格轨迹）"><a href="#grid-track-（栅格轨迹）" class="header-anchor">#</a> Grid Track （栅格轨迹）</h3> <p>相邻栅格线的区域。你可以认为他们是栅格的一行或者一列。以下是第二与第三栅格线间的栅格轨迹。</p> <p><img src="http://p0.qhimg.com/t013745f6e74cf7d816.png" alt="Grid track"></p> <h3 id="grid-cell-（栅格格子）"><a href="#grid-cell-（栅格格子）" class="header-anchor">#</a> Grid Cell （栅格格子）</h3> <p>相邻行栅格线与相邻列栅格线间的区域。它是栅格的独立“单元”。以下栅格格子位于1，2行栅格线与2，3列栅格线间。</p> <p><img src="http://p0.qhimg.com/t011525144466eab825.png" alt="Grid cell"></p> <h3 id="grid-area-（栅格区域）"><a href="#grid-area-（栅格区域）" class="header-anchor">#</a> Grid Area （栅格区域）</h3> <p>被四个栅格线围绕的区域。一个栅格区域由任意数量的栅格格子组成。以下栅格区域位于1，3行栅格线与1，3列栅格线间。</p> <p><img src="http://p0.qhimg.com/t01813808bbd3562ad3.png" alt="Grid area"></p> <h2 id="栅格属性内容表"><a href="#栅格属性内容表" class="header-anchor">#</a> 栅格属性内容表</h2> <p>属于栅格容器的属性：</p> <ul><li><a href="#prop-display">display</a></li> <li><a href="#prop-grid-template-columns">grid-template-columns</a></li> <li><a href="#prop-grid-template-columns">grid-template-rows</a></li> <li><a href="#prop-grid-template-areas">grid-template-areas</a></li> <li><a href="#prop-grid-column-gap">grid-column-gap</a></li> <li><a href="#prop-grid-row-gap">grid-row-gap</a></li> <li><a href="#prop-grid-gap">grid-gap</a></li> <li><a href="#prop-justify-items">justify-items</a></li> <li><a href="#prop-align-items">align-items</a></li> <li><a href="#prop-justify-content">justify-content</a></li> <li><a href="#prop-align-content">align-content</a></li> <li><a href="#prop-grid-auto-columns">grid-auto-columns</a></li> <li><a href="#prop-grid-auto-rows">grid-auto-rows</a></li> <li><a href="#prop-grid-auto-flow">grid-auto-flow</a></li> <li><a href="#prop-grid">grid</a></li></ul> <p>属于栅格项目的属性：</p> <ul><li><a href="#prop-grid-column-start">grid-column-start</a></li> <li><a href="#prop-grid-column-end">grid-column-end</a></li> <li><a href="#prop-grid-row-start">grid-row-start</a></li> <li><a href="#prop-grid-row-end">grid-row-end</a></li> <li><a href="#prop-grid-column">grid-column</a></li> <li><a href="#prop-grid-row">grid-row</a></li> <li><a href="#prop-grid-area">grid-area</a></li> <li><a href="#prop-justify-self">justify-self</a></li> <li><a href="#prop-align-self">align-self</a></li></ul> <h2 id="栅格容器属性（grid-container）"><a href="#栅格容器属性（grid-container）" class="header-anchor">#</a> 栅格容器属性（Grid Container）</h2> <h3 id="display"><a href="#display" class="header-anchor">#</a> display</h3> <p>定义该元素为栅格项目，并且为它的内容建立一个新的<em>栅格格式上下文（grid formatting context）</em>。</p> <blockquote><p>译者注：还记得 BFC 与 IFC 吗？</p></blockquote> <p>属性值：</p> <ul><li><strong>grid</strong> 生成块状栅格</li> <li><strong>inline-grid</strong> 生成行间栅格</li> <li><strong>subgrid</strong> 如果你的栅格容器本身是一个栅格项目的话（例如：嵌套栅格），你可以根据它的父元素而不是它自己，指定行列大小。</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> grid | inline-grid | subgrid<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>注意：<code>column</code>，<code>float</code>，<code>clear</code> 与 <code>vertical-align</code> 在栅格容器上无效。</p> <h3 id="grid-template-columns-grid-template-rows"><a href="#grid-template-columns-grid-template-rows" class="header-anchor">#</a> grid-template-columns <br> grid-template-rows</h3> <p>通过空格分隔的值定义栅格的行与列。值代表轨迹大小（track size），它们中间的间隙代表栅格线。</p> <p>属性值：</p> <ul><li><strong>&lt;track-size&gt;</strong> 可以是长度，百分比，或者栅格中的空白空间（使用 <code>fr</code>）</li> <li><strong>&lt;line-name&gt;</strong> 任意名字，任君选择</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> &lt;track-size&gt; ... | &lt;line-name&gt; &lt;track-size&gt; ...<span class="token punctuation">;</span>
  <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> &lt;track-size&gt; ... | &lt;line-name&gt; &lt;track-size&gt; ...<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>示例:</p> <p>当你在轨迹值之间预留空格时，栅格线会被自动分配为数值名字。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 40px 50px auto 50px 40px<span class="token punctuation">;</span>
  <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 25% 100px auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t01800e6196346b74a6.png" alt="Grid with auto named lines"></p> <p>你也可以为栅格线设置名字，注意栅格线名字的括号语法：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]<span class="token punctuation">;</span>
  <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t01ef91a9cf4b5217c7.png" alt="Grid with user named lines"></p> <p>注意一条线可以有多个名字。例如，这里第二条线有两个名字：row1-end 和 row2-start。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> [row1-start] 25% [row1-end row2-start] 25% [row2-end]<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>如果你定义的内容包含重复部分，你可以使用 <code>repeat()</code> 标记去组织它。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>3<span class="token punctuation">,</span> 20px [col-start]<span class="token punctuation">)</span> 5%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>与以下代码是等价的</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 20px [col-start] 20px [col-start] 20px [col-start] 5%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><code>fr</code> 允许你设置轨迹大小为栅格容器的一部分。例如，以下示例将设置每个项目为栅格容器的三分之一。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 1fr 1fr<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>空白空间将在固定项目 <em>之后</em> 被计算。在这个例子中，给 <code>fr</code> 分配的全部空余时间不包括 50px。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 50px 1fr 1fr<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="grid-template-areas"><a href="#grid-template-areas" class="header-anchor">#</a> grid-template-areas</h3> <p>通过指定栅格区域的名字来定义栅格模板，这样栅格项目会通过 <a href="#prop-grid-area"><code>grid-area</code></a> 属性来指定区域。重复栅格区域的名字将会合并栅格格子，一个句点表示一个空的栅格格子。语法本身提供了一个可视化的栅格结构。</p> <p>属性值：</p> <ul><li><strong>&lt;grid-area-name&gt;</strong> 在项目中使用 <a href="#prop-grid-area"><code>grid-area</code></a> 属性指定的栅格区域</li> <li><strong>.</strong> 句点表示空白栅格格子</li> <li><strong>none</strong> 不定义栅格区域</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">&quot;&lt;grid-area-name&gt; | . | none | ...&quot;</span>
                       <span class="token string">&quot;...&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>示例:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item-a</span><span class="token punctuation">{</span>
  <span class="token property">grid-area</span><span class="token punctuation">:</span> header<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.item-b</span><span class="token punctuation">{</span>
  <span class="token property">grid-area</span><span class="token punctuation">:</span> main<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.item-c</span><span class="token punctuation">{</span>
  <span class="token property">grid-area</span><span class="token punctuation">:</span> sidebar<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.item-d</span><span class="token punctuation">{</span>
  <span class="token property">grid-area</span><span class="token punctuation">:</span> footer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 50px 50px 50px 50px<span class="token punctuation">;</span>
  <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
  <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">&quot;header header header header&quot;</span>
                       <span class="token string">&quot;main main . sidebar&quot;</span>
                       <span class="token string">&quot;footer footer footer footer&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>这将建造一个三行四列的栅格。第一行全部由 <strong>header</strong> 区域组成，第二行由两个 <strong>main</strong> 区域，一个空白格子与一个 <strong>sidebar</strong> 区域组成。最后一行全部由 <strong>footer</strong> 组成。</p> <p><img src="http://p0.qhimg.com/t0100d72cb04db7fd4e.png" alt="Example of grid-template-areas"></p> <p>你声明的每行都需要有相同数量的栅格格子。</p> <p>你可以使用任意数量无空格分割的相邻句点去表示单个空白栅格格子。</p> <blockquote><p>译者注：<code>grid-template-areas: &quot;first . last&quot;</code> 与 <code>grid-template-areas: &quot;first ...... last&quot;</code> 等价。</p></blockquote> <p>注意，这种语法仅仅能命名区域，而无法命名栅格线。实际上，当你使用这种语法的时候，栅格区域两端的栅格线已被自动命名。如果你的栅格区域叫 <em><strong>foo</strong></em>，栅格区域开始的行与列将被命名为 <em><strong>foo-start</strong></em>，而结束的行与列将被命名为 <em><strong>foo-end</strong></em>。这意味着一些栅格线会有很多名字，比如上述例子的最左边的栅格线将会有三个名字：header-start, main-start 和 footer-start。</p> <h3 id="grid-template"><a href="#grid-template" class="header-anchor">#</a> grid-template</h3> <p><a href="#prop-grid-template-columns"><code>grid-template-columns</code></a>，<a href="#prop-grid-template-rows"><code>grid-template-rows</code></a> 和 <a href="#prop-grid-template-areas"><code>grid-template-areas</code></a> 的简写。</p> <p>属性值：</p> <ul><li><strong>none</strong> 设置这三个属性为初始属性</li> <li><strong>subgrid</strong> 设置 <code>grid-template-rows</code> 和 <code>grid-template-columns</code> 为 <code>subgrid</code>，<code>grid-template-areas</code> 为初始值。</li> <li><strong>&lt;grid-template-columns&gt; / &lt;grid-template-rows&gt;</strong> 设置 <code>grid-template-columns</code> 与 <code>grid-template-rows</code> 为各自指定的值。而 <code>grid-template-areas</code> 为 <code>none</code>。</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-template</span><span class="token punctuation">:</span> none | subgrid | &lt;grid-template-columns&gt; / &lt;grid-template-rows&gt;<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>另外，也有一个比较复杂但是方便的语法指定三个属性，示例如下</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-template</span><span class="token punctuation">:</span> auto 50px auto /
    [row1-start] 25px <span class="token string">&quot;header header header&quot;</span> [row1-end]
    [row2-start] <span class="token string">&quot;footer footer footer&quot;</span> 25px [row2-end]<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>与以下代码是等价的：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> auto 50px auto<span class="token punctuation">;</span>
  <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> [row1-start] 25px [row1-end row2-start] 25px [row2-end]<span class="token punctuation">;</span>
  <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> 
    <span class="token string">&quot;header header header&quot;</span> 
    <span class="token string">&quot;footer footer footer&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>因为 <code>grid-template</code> 无法 <em>隐式</em> 重置属性（<a href="#prop-grid-auto-columns"><code>grid-auto-columns</code></a>，<a href="#prop-grid-auto-rows"><code>grid-auto-rows</code></a> 与 <a href="#prop-grid-auto-flow"><code>grid-auto-flow</code></a>）。或许你想做更多的事，那么推荐你使用 <code>grid</code> 属性去替代 <code>grid-template</code>。</p> <h3 id="grid-column-gap-grid-row-gap"><a href="#grid-column-gap-grid-row-gap" class="header-anchor">#</a> grid-column-gap <br> grid-row-gap</h3> <p>指定栅格线的大小，你可以理解它为设置行/列间隙。</p> <p>属性值：</p> <ul><li><strong>&lt;line-size&gt;</strong> 长度值</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-column-gap</span><span class="token punctuation">:</span> &lt;line-size&gt;<span class="token punctuation">;</span>
  <span class="token property">grid-row-gap</span><span class="token punctuation">:</span> &lt;line-size&gt;<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>示例:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 100px 50px 100px<span class="token punctuation">;</span>
  <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 80px auto 80px<span class="token punctuation">;</span> 
  <span class="token property">grid-column-gap</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property">grid-row-gap</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t016578aaf2c91f4465.png" alt="Example of grid-column-gap and grid-row-gap"></p> <p>栅格间隙仅仅在行/列 <em>之间</em>，不包括最外部的边。</p> <h3 id="grid-gap"><a href="#grid-gap" class="header-anchor">#</a> grid-gap</h3> <p><a href="#prop-grid-row-gap"><code>grid-column-gap</code></a> 与 <a href="#prop-grid-row-gap"><code>grid-row-gap</code></a> 的简写。</p> <p>属性值：</p> <ul><li><strong>&lt;grid-row-gap&gt; &lt;grid-column-gap&gt;</strong> 长度值</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-gap</span><span class="token punctuation">:</span> &lt;grid-row-gap&gt; &lt;grid-column-gap&gt;<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>示例:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 100px 50px 100px<span class="token punctuation">;</span>
  <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 80px auto 80px<span class="token punctuation">;</span> 
  <span class="token property">grid-gap</span><span class="token punctuation">:</span> 10px 15px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>如果没有设置 <code>grid-row-gap</code>，它将于 <code>grid-column-gap</code> 保持一致。</p> <h3 id="justify-items"><a href="#justify-items" class="header-anchor">#</a> justify-items</h3> <p>使栅格项目中的内容与 <em>列</em> 轴对齐（相应地，<a href="#prop-align-items"><code>align-items</code></a> 与 <em>行</em> 轴对齐）。这个属性值应用在容器中的所有项目上。</p> <p>属性值：</p> <ul><li><strong>start</strong> 使内容与栅格区域左侧对齐</li> <li><strong>end</strong> 使内容与栅格区域右侧对齐</li> <li><strong>center</strong> 使内容在栅格区域中居中</li> <li><strong>stretch</strong> 使内容充满整个栅格区域的宽（默认属性）</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">justify-items</span><span class="token punctuation">:</span> start | end | center | stretch<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>示例</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">justify-items</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t014aac0561a2356880.png" alt="Example of justify-items set to start"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">justify-items</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t0150250ab32231e09d.png" alt="Example of justify-items set to end"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">justify-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t0165c50666a5eb75e3.png" alt="Example of justify-items set to center"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">justify-items</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t013f7d913386d24db6.png" alt="Example of justify-items set to stretch"></p> <p>这个行为也可以通过 <a href="#prop-justify-self"><code>justify-self</code></a> 属性设置在独立的栅格项目上。</p> <h3 id="align-items"><a href="#align-items" class="header-anchor">#</a> align-items</h3> <p>使栅格项目中的内容与 <em>行</em> 轴对齐（相应地，<a href="prop-justify-items"><code>justify-items</code></a> 与 <em>列</em> 轴对齐）。这个属性值应用在容器中的所有项目上。</p> <p>属性值：</p> <ul><li><strong>start</strong> 使内容与栅格区域顶部对齐</li> <li><strong>end</strong> 使内容与栅格区域底部对齐</li> <li><strong>center</strong> 使内容在栅格区域中居中</li> <li><strong>stretch</strong> 使内容充满整个栅格区域的高（默认属性）</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> start | end | center | stretch<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>示例:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t01ff0fa166f558197d.png" alt="Example of align-items set to start"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t01db036a5039b6f137.png" alt="Example of align-items set to end"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t0169cb9db61ffbae54.png" alt="Example of align-items set to center"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t013f7d913386d24db6.png" alt="Example of align-items set to stretch"></p> <p>这个行为也可以通过 <a href="#prop-align-self"><code>align-self</code></a> 属性设置在独立的栅格项目上。</p> <h3 id="justify-content"><a href="#justify-content" class="header-anchor">#</a> justify-content</h3> <p>有时候，栅格的总大小小于栅格容器的大小，比如你使用 <code>px</code> 给所有的栅格项目设置了固定大小。本例中，你可以设置栅格容器中栅格的对齐。这个属性会使栅格与 <em>列</em> 轴对齐（相应地，<a href="#prop-align-content"><code>align-content</code></a> 会使栅格与 <em>行</em> 轴对齐）。</p> <p>属性值：</p> <ul><li><strong>start</strong> 与栅格容器的左侧对齐</li> <li><strong>end</strong> 与栅格容器的右侧对齐</li> <li><strong>center</strong> 在栅格容器中居中</li> <li><strong>stretch</strong> 调整栅格项目的大小，使栅格充满整个栅格容器。</li> <li><strong>space-around</strong> 每两个项目之间留有相同的空白，在最左端与最右端为一半大小的空白。</li> <li><strong>space-between</strong> 每两个项目之间留有相同的空白，在最左端与最右端不留空白。</li> <li><strong>space-evenly</strong> 每两个项目之间留有相同的空白，包括两端。</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
  <span class="token property">align-content</span><span class="token punctuation">:</span> start | end | center | stretch | space-around | space-between | space-evenly<span class="token punctuation">;</span>  
<span class="token punctuation">}</span>
</code></pre></div><p>示例:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t011c175bd21bd04873.png" alt="Example of justify-content set to start"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span>  
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t012fdfb43be210320b.png" alt="Example of justify-content set to end"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>  
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t0121f6243af228e533.png" alt="Example of justify-content set to center"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>  
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t01d47cbca62430ca01.png" alt="Example of justify-content set to stretch"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> space-around<span class="token punctuation">;</span>  
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t01a20181854966e956.png" alt="Example of justify-content set to space-around"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>  
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t01ce2fa8742987e2d7.png" alt="Example of justify-content set to space-between"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> space-evenly<span class="token punctuation">;</span>  
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t01850de3364c4bbe46.png" alt="Example of justify-content set to space-evenly"></p> <h3 id="align-content"><a href="#align-content" class="header-anchor">#</a> align-content</h3> <p>有时候，栅格的总大小小于栅格容器的大小，比如你使用 <code>px</code> 给所有的栅格项目设置了固定大小。本例中，你可以设置栅格容器中栅格的对齐。这个属性会使栅格与 <em>行</em> 轴对齐（相应地，<code>align-content</code> 会使栅格与 <em>列</em> 轴对齐）。</p> <p>属性值：</p> <ul><li><strong>start</strong> 与栅格容器的顶部对齐</li> <li><strong>end</strong> 与栅格容器的底部对齐</li> <li><strong>center</strong> 在栅格容器中居中</li> <li><strong>stretch</strong> 调整栅格项目的大小，使栅格充满整个栅格容器。</li> <li><strong>space-around</strong> 每两个项目之间留有相同的空白，在最左端与最右端为一半大小的空白。</li> <li><strong>space-between</strong> 每两个项目之间留有相同的空白，在最左端与最右端不留空白。</li> <li><strong>space-evenly</strong> 每两个项目之间留有相同的空白，包括两端。</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">align-content</span><span class="token punctuation">:</span> start | end | center | stretch | space-around | space-between | space-evenly<span class="token punctuation">;</span>  
<span class="token punctuation">}</span>

</code></pre></div><p>示例:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">align-content</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>  
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t017f5b8278a30f5c6d.png" alt="Example of align-content set to start"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">align-content</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span>  
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t018c44b23f2d7d8bcd.png" alt="Example of align-content set to end"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">align-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>  
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t01e3f8dffe087bebcf.png" alt="Example of align-content set to center"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">align-content</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>  
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t015b64390a99043ad4.png" alt="Example of align-content set to stretch"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">align-content</span><span class="token punctuation">:</span> space-around<span class="token punctuation">;</span>  
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t01e4088675bc8f2291.png" alt="Example of align-content set to space-around"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">align-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>  
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t011990e6cf87af8a91.png" alt="Example of align-content set to space-between"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">align-content</span><span class="token punctuation">:</span> space-evenly<span class="token punctuation">;</span>  
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t0177c7695d648f9823.png" alt="Example of align-content set to space-evenly"></p> <h3 id="grid-auto-columns-grid-auto-rows"><a href="#grid-auto-columns-grid-auto-rows" class="header-anchor">#</a> grid-auto-columns <br> grid-auto-rows</h3> <p>指定自动生成的栅格轨迹的大小（亦称<em>隐式栅格轨迹</em>）。当你显式定位行与列的时候（通过 <code>grid-template-rows</code> / <code>grid-template-columns</code>），隐式栅格轨迹会在定义的栅格外被创建。</p> <p>属性值：</p> <ul><li><strong>&lt;track-size&gt;</strong> 可以是长度，百分比或者 <code>fr</code></li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-auto-columns</span><span class="token punctuation">:</span> &lt;track-size&gt; ...<span class="token punctuation">;</span>
  <span class="token property">grid-auto-rows</span><span class="token punctuation">:</span> &lt;track-size&gt; ...<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>举例了解隐式栅格轨迹是如何被创建的，考虑以下示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 60px 60px<span class="token punctuation">;</span>
  <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 90px 90px
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t013dd10f7cf04f23d7.png" alt="Example of implicit tracks"></p> <p>本示例建造了 2 * 2 的栅格。</p> <p>你使用 <code>[grid-column</code>](#prop-grid-column) 与 <a href="#prop-grid-row"><code>grid-row</code></a> 去定位你的项目如下：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item-a</span><span class="token punctuation">{</span>
  <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 2<span class="token punctuation">;</span>
  <span class="token property">grid-row</span><span class="token punctuation">:</span> 2 / 3<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.item-b</span><span class="token punctuation">{</span>
  <span class="token property">grid-column</span><span class="token punctuation">:</span> 5 / 6<span class="token punctuation">;</span>
  <span class="token property">grid-row</span><span class="token punctuation">:</span> 2 / 3<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="https://cdn.css-tricks.com/wp-content/uploads/2016/03/implicit-tracks.png" alt="Example of implicit tracks"></p> <p>我们告知 .item-b 在 5-6 列间，<em>但我们从未定义第五列或者第六列</em>。因为我们引用的栅格线不存在，宽度为0的隐式栅格轨迹将会创建去填充空白。我们可以使用 <a href="#prop-grid-auto-rows"><code>grid-auto-columns</code></a> 和 <a href="#prop-grid-auto-rows"><code>grid-auto-rows</code></a> 去指定这些轨迹的宽。</p> <blockquote><p>译者注：经译者测试，并非以宽度为0的 implicit track 去填充。<a href="https://www.w3.org/TR/css-grid-1/#auto-tracks" target="_blank" rel="noopener noreferrer">w3c auto-tracks<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 上表明 <code>grid-auto-columns</code> 的默认值为 <code>auto</code>，则超过的列将会平分空白空间。</p></blockquote> <p><img src="https://cdn.css-tricks.com/wp-content/uploads/2016/03/implicit-tracks-with-widths.png" alt="Example of implicit tracks"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-auto-columns</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t010ddf221c5b3c93b5.png" alt="Example of implicit tracks"></p> <h3 id="grid-auto-flow"><a href="#grid-auto-flow" class="header-anchor">#</a> grid-auto-flow</h3> <p>如果你的栅格项目没有显式地在栅格中设置位置，<em>自动放置算法</em>便会生效。这个属性控制自动放置算法的的运作。</p> <p>属性值：</p> <ul><li><strong>row</strong> 自动放置算法将按行依次排列，按需添加新行。</li> <li><strong>column</strong> 自动放置算法将按列依次排列，按需添加新列。</li> <li><strong>dense</strong> 如果较小的项目出现靠后时，自动防止算法将尽可能早地填充栅格的空白格子</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">grid-auto-flow</span><span class="token punctuation">:</span> row | column | row dense | column dense
<span class="token punctuation">}</span>
</code></pre></div><p>注意 <strong>dense</strong> 可能使你的项目次序颠倒。</p> <p>示例:</p> <p>考虑以下 html:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item-a<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>item-a<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item-b<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>item-b<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item-c<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>item-c<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item-d<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>item-d<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item-e<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>item-e<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>你定义了一个两行五列的栅格，并设置它的 <a href="#prop-grid-auto-flow"><code>grid-auto-flow</code></a> 属性为 <code>row</code> （默认属性便是 <code>row</code>）。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 60px 60px 60px 60px 60px<span class="token punctuation">;</span>
    <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 30px 30px<span class="token punctuation">;</span>
    <span class="token property">grid-auto-flow</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>当我们把项目放置在栅格中的时候，明确指定以下两个项目的位置</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item-a</span><span class="token punctuation">{</span>
    <span class="token property">grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
    <span class="token property">grid-row</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.item-e</span><span class="token punctuation">{</span>
    <span class="token property">grid-column</span><span class="token punctuation">:</span> 5<span class="token punctuation">;</span>
    <span class="token property">grid-row</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>因为我们设置了 <a href="#prop-grid-auto-flow"><code>grid-auto-flow</code></a> 属性为 <code>row</code>，呈现在我们眼前的栅格便是如下这个样子。注意，这三个项目（<strong>item-b</strong>，<strong>item-c</strong> 与 <strong>item-d</strong>）并没有特意指定位置。</p> <p><img src="http://p0.qhimg.com/t010c337beef320ef8a.png" alt="Example of grid-auto-flow set to row"></p> <p>如果设置 <a href="#prop-grid-auto-flow"><code>grid-auto-flow</code></a> 的属性为 <code>column</code>，item-b**，<strong>item-c</strong> 与 <strong>item-d</strong> 将按列以此排序。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 60px 60px 60px 60px 60px<span class="token punctuation">;</span>
    <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 30px 30px<span class="token punctuation">;</span>
    <span class="token property">grid-auto-flow</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t015f3b6d634d9bf1a1.png" alt="Example of grid-auto-flow set to column"></p> <h3 id="grid"><a href="#grid" class="header-anchor">#</a> grid</h3> <p>以下属性的缩写：<a href="#prop-grid-template-rows"><code>grid-template-rows</code></a>， <a href="#prop-grid-template-columns"><code>grid-template-columns</code></a>， <a href="#prop-grid-template-areas"><code>grid-template-areas</code></a>，<a href="#prop-grid-auto-rows"><code>grid-auto-rows</code></a>，<a href="#prop-grid-auto-columns"><code>grid-auto-columns</code></a><code>，与 [</code>grid-auto-flow<code>](#prop-grid-auto-flow)</code>。它也可以设置 <a href="#prop-grid-column-gap"><code>grid-column-gap</code></a> 和 <a href="#prop-grid-column-gap"><code>grid-row-gap</code></a>为默认值，即使并没有在 <code>grid</code> 中明确设置。</p> <p>属性值：</p> <ul><li><strong>none</strong> 设置所有子属性的值为初始值。</li> <li><strong>&lt;grid-template-rows&gt; / &lt;grid-template-columns&gt;</strong> 仅仅设置这两个属性值，其它子属性值为初始值。</li> <li><strong>&lt;grid-auto-flow&gt; [&lt;grid-auto-rows&gt; [ / &lt;grid-auto-columns&gt;] ]</strong> 如果 <a href="#prop-grid-auto-rows"><code>grid-auto-columns</code></a> 属性值确实，则采用 <a href="#prop-grid-auto-rows"><code>grid-auto-rows</code></a>的值。如果属性值均缺失，则采用默认值。</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
    <span class="token property">grid</span><span class="token punctuation">:</span> none | &lt;grid-template-rows&gt; / &lt;grid-template-columns&gt; | &lt;grid-auto-flow&gt; [&lt;grid-auto-rows&gt; [/ &lt;grid-auto-columns&gt;]]<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>以下两种写法是等价的：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
    <span class="token property">grid</span><span class="token punctuation">:</span> 200px auto / 1fr auto 1fr<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
    <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 200px auto<span class="token punctuation">;</span>
    <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr auto 1fr<span class="token punctuation">;</span>
    <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>以下两种写法也是等价的：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
    <span class="token property">grid</span><span class="token punctuation">:</span> column 1fr / auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
    <span class="token property">grid-auto-flow</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
    <span class="token property">grid-auto-rows</span><span class="token punctuation">:</span> 1fr<span class="token punctuation">;</span>
    <span class="token property">grid-auto-columns</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>另外你可以设置更为复杂但相当方便的语法一次性设置所有属性。你可以指定<a href="#prop-grid-template-areas"><code>grid-template-areas</code></a>， <a href="#prop-grid-auto-rows"><code>grid-auto-rows</code></a> 与 <a href="#prop-grid-auto-rows"><code>grid-auto-columns</code></a>，其他子属性将被设为默认值。你需要指定栅格线与轨迹大小，这很容易用一个例子表示：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
    <span class="token property">grid</span><span class="token punctuation">:</span> [row1-start] <span class="token string">&quot;header header header&quot;</span> 1fr [row1-end]
          [row2-start] <span class="token string">&quot;footer footer footer&quot;</span> 25px [row2-end]
          / auto 50px auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>与以下写法是等价的：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
    <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">&quot;header header header&quot;</span>
                         <span class="token string">&quot;footer footer footer&quot;</span><span class="token punctuation">;</span>
    <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> [row1-start] 1fr [row1-end row2-start] 25px [row2-end]<span class="token punctuation">;</span>
    <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> auto 50px auto<span class="token punctuation">;</span>    
<span class="token punctuation">}</span>
</code></pre></div><h2 id="栅格项目属性-（grid-items）"><a href="#栅格项目属性-（grid-items）" class="header-anchor">#</a> 栅格项目属性 （Grid Items）</h2> <h3 id="grid-column-start-grid-column-end-grid-row-start-grid-row-end"><a href="#grid-column-start-grid-column-end-grid-row-start-grid-row-end" class="header-anchor">#</a> grid-column-start <br> grid-column-end <br> grid-row-start <br> grid-row-end</h3> <p>通过指定栅格线来确定栅格项目的位置。<code>grid-column-start</code> / <code>grid-row-start</code> 代表项目开始的线，<code>grid-column-end</code>/<code>grid-row-end</code> 代表项目结束的线。</p> <p>属性值：</p> <ul><li><strong>&lt;Line&gt;</strong> 可以是一个表示栅格线名字或数字。</li> <li><strong>span &lt;number&gt;</strong> 项目将横跨指定数量栅格轨迹</li> <li><strong>span &lt;name&gt;</strong> 项目将横跨至指定名字的栅格线</li> <li><strong>auto</strong> 自动放置，自动跨越轨迹或者默认跨越轨迹</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item</span><span class="token punctuation">{</span>
  <span class="token property">grid-column-start</span><span class="token punctuation">:</span> &lt;number&gt; | &lt;name&gt; | span &lt;number&gt; | span &lt;name&gt; | auto
  <span class="token property">grid-column-end</span><span class="token punctuation">:</span> &lt;number&gt; | &lt;name&gt; | span &lt;number&gt; | span &lt;name&gt; | auto
  <span class="token property">grid-row-start</span><span class="token punctuation">:</span> &lt;number&gt; | &lt;name&gt; | span &lt;number&gt; | span &lt;name&gt; | auto
  <span class="token property">grid-row-end</span><span class="token punctuation">:</span> &lt;number&gt; | &lt;name&gt; | span &lt;number&gt; | span &lt;name&gt; | auto
<span class="token punctuation">}</span>
</code></pre></div><p>示例:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item-a</span><span class="token punctuation">{</span>
  <span class="token property">grid-column-start</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
  <span class="token property">grid-column-end</span><span class="token punctuation">:</span> five<span class="token punctuation">;</span>
  <span class="token property">grid-row-start</span><span class="token punctuation">:</span> row1-start
  <span class="token property">grid-row-end</span><span class="token punctuation">:</span> 3
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t01c319940a0751c21a.png" alt="Example of grid-row/column-start/end"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item-b</span><span class="token punctuation">{</span>
  <span class="token property">grid-column-start</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
  <span class="token property">grid-column-end</span><span class="token punctuation">:</span> span col4-start<span class="token punctuation">;</span>
  <span class="token property">grid-row-start</span><span class="token punctuation">:</span> 2
  <span class="token property">grid-row-end</span><span class="token punctuation">:</span> span 2
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t01637405e7c4e4b477.png" alt="Example of grid-row/column-start/end"></p> <p>如果没有指定 grid-column-end/grid-row-end，项目默认横跨一个轨迹。</p> <p>项目可能会互相重叠，你可以使用 <code>z-index</code> 控制它们的层叠顺序（stacking order）。</p> <h3 id="grid-column-grid-row"><a href="#grid-column-grid-row" class="header-anchor">#</a> grid-column <br> grid-row</h3> <p>各自表示<a href="#prop-grid-row-start"><code>grid-column-start</code></a> + <a href="#prop-grid-row-start"><code>grid-column-end</code></a> 与 <a href="#prop-grid-row-start"><code>grid-row-start</code></a> + <a href="#prop-grid-row-start"><code>grid-row-end</code></a>的缩写。</p> <p>属性值：</p> <ul><li><strong>&lt;start-line&gt; / &lt;end-line&gt;</strong> 接收 grid-column-start 同样的属性值，包括 span</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item</span><span class="token punctuation">{</span>
  <span class="token property">grid-column</span><span class="token punctuation">:</span> &lt;start-line&gt; / &lt;end-line&gt; | &lt;start-line&gt; / span &lt;value&gt;<span class="token punctuation">;</span>
  <span class="token property">grid-row</span><span class="token punctuation">:</span> &lt;start-line&gt; / &lt;end-line&gt; | &lt;start-line&gt; / span &lt;value&gt;<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Example:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item-c</span><span class="token punctuation">{</span>
  <span class="token property">grid-column</span><span class="token punctuation">:</span> 3 / span 2<span class="token punctuation">;</span>
  <span class="token property">grid-row</span><span class="token punctuation">:</span> third-line / 4<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t01f866d9710ca9325b.png" alt="Example of grid-column/grid-row"></p> <p>如果没有指定 end line，项目将默认跨越一个轨迹。</p> <h3 id="grid-area"><a href="#grid-area" class="header-anchor">#</a> grid-area</h3> <p>当创建栅格容器使用 <a href="#prop-grid-template-areas"><code>grid-template-areas</code></a> 属性时，可以通过制定区域名字确定栅格项目的位置。同样，它也可以作为以下属性的缩写：<a href="#prop-grid-row-start"><code>grid-row-start</code></a> + <a href="#prop-grid-row-start"><code>grid-column-start</code></a> + <a href="#prop-grid-row-start"><code>grid-row-end</code></a> + <a href="#prop-grid-row-start"><code>grid-column-end</code></a>。</p> <p>属性值：</p> <ul><li><strong>&lt;name&gt;</strong></li> <li><strong>&lt;row-start&gt; / &lt;column-start&gt; / &lt;row-end&gt; / &lt;column-end&gt;</strong></li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item</span><span class="token punctuation">{</span>
  <span class="token property">grid-area</span><span class="token punctuation">:</span> &lt;name&gt; | &lt;row-start&gt; / &lt;column-start&gt; / &lt;row-end&gt; / &lt;column-end&gt;<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>示例:</p> <p>你可以给项目设置名字：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item-d</span><span class="token punctuation">{</span>
  <span class="token property">grid-area</span><span class="token punctuation">:</span> header
<span class="token punctuation">}</span>
</code></pre></div><p>也可以作为<a href="#prop-grid-row-start"><code>grid-row-start</code></a> + <a href="#prop-grid-row-start"><code>grid-column-start</code></a> + <a href="#prop-grid-row-start"><code>grid-row-end</code></a> + <a href="#prop-grid-row-start"><code>grid-column-end</code></a> 的缩写：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item-d</span><span class="token punctuation">{</span>
  <span class="token property">grid-area</span><span class="token punctuation">:</span> 1 / col4-start / last-line / 6
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t01adce45c1a81e99a9.png" alt="Example of grid-area"></p> <h3 id="justify-self"><a href="#justify-self" class="header-anchor">#</a> justify-self</h3> <p>使栅格项目中的内容与 <em>列</em> 轴对齐（相应地，<a href="#prop-align-self"><code>align-self</code></a> 与 <em>行</em> 轴对齐）。本属性值适用于单个项目的内容。</p> <p>属性值：</p> <ul><li><strong>start</strong> 使内容与栅格区域左侧对齐</li> <li><strong>end</strong> 使内容与栅格区域右侧对齐</li> <li><strong>center</strong> 使内容在栅格区域中居中</li> <li><strong>stretch</strong> 使内容充满整个栅格区域的宽（默认属性）</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item</span><span class="token punctuation">{</span>
  <span class="token property">justify-self</span><span class="token punctuation">:</span> start | end | center | stretch<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>示例:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item-a</span><span class="token punctuation">{</span>
  <span class="token property">justify-self</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t012726e6a9b31ae7b9.png" alt="Example of justify-self set to start"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item-a</span><span class="token punctuation">{</span>
  <span class="token property">justify-self</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t017b10ee4bdb228696.png" alt="Example of justify-self set to end"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item-a</span><span class="token punctuation">{</span>
  <span class="token property">justify-self</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t0137ce363f085b12b7.png" alt="Example of justify-self set to center"></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item-a</span><span class="token punctuation">{</span>
  <span class="token property">justify-self</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre></div><p><img src="http://p0.qhimg.com/t0129d1eb7fd5521656.png" alt="Example of justify-self set to stretch"></p> <p>为了对栅格项目中的<strong>所有</strong>项目设置对齐，可以是指栅格容器的 <a href="#prop-justify-items"><code>justify-items</code></a> 属性。</p> <h3 id="align-self"><a href="#align-self" class="header-anchor">#</a> align-self</h3> <p>使栅格项目中的内容与 <em>行</em> 轴对齐（相应地，<a href="#prop-justify-self"><code>justify-self</code></a> 与<em>列</em>轴对齐）。本属性值适用于单个项目的内容。</p> <p>属性值：</p> <ul><li><strong>start</strong> 使内容与栅格区域顶部对齐</li> <li><strong>end</strong> 使内容与栅格区域底部对齐</li> <li><strong>center</strong> 使内容在栅格区域中居中</li> <li><strong>stretch</strong> 使内容充满整个栅格区域的高（默认属性）</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item</span><span class="token punctuation">{</span>
  <span class="token property">align-self</span><span class="token punctuation">:</span> start | end | center | stretch<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>示例:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item-a</span><span class="token punctuation">{</span>
  <span class="token property">align-self</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="http://p0.qhimg.com/t0135bf5bf8c59224bb.png" alt="Example of align-self set to start"></p> <div class="language- extra-class"><pre class="language-text"><code>.item-a{
  align-self: end;
}

</code></pre></div><p><img src="http://p0.qhimg.com/t0138110adbf89ff364.png" alt="Example of align-self set to end"></p> <div class="language- extra-class"><pre class="language-text"><code>.item-a{
  align-self: center;
}

</code></pre></div><p><img src="http://p0.qhimg.com/t0176017095e3a523f2.png" alt="Example of align-self set to center"></p> <div class="language- extra-class"><pre class="language-text"><code>.item-a{
  align-self: stretch;
}

</code></pre></div><p><img src="http://p0.qhimg.com/t01808ac36d9b99d412.png" alt="Example of align-self set to stretch"></p> <p>为了对栅格项目中的<strong>所有</strong>项目设置对齐，可以设置栅格容器的 <a href="#prop-align-items"><code>align-items</code></a> 属性。</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">7/20/2020, 2:09:44 AM</span></div></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.cb35c8f6.js" defer></script><script src="/assets/js/2.063846a6.js" defer></script><script src="/assets/js/4.1ffb4609.js" defer></script><script src="/assets/js/677.41a8087a.js" defer></script>
  </body>
</html>
